/* ==================================================
   RR ASSOCIATES MASTER CSS
   Premium • Optimized • Responsive • Unified
================================================== */

/* ================= ROOT ================= */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,500;1,600&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap");

:root {
  --navy: #001f3f;
  --navy2: #08294b;
  --navy3: #02162d;
  --gold: #edb642;
  --gold2: #c5a86b;
  --white: #ffffff;
  --soft: #f8f9fc;
  --text: #5d6c7d;
  --line: #edf1f4;

  --shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 25px 45px rgba(0, 0, 0, 0.1);

  --radius: 24px;
  --radius-sm: 14px;
  --transition: 0.35s ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  color: var(--navy);
  background: #fff;
  overflow-x: hidden;
}

.top-banner {
  background-color: #111111;
  color: #888888;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 40px;
  box-sizing: border-box;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2002;
}

.banner-left,
.banner-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.separator {
  color: #666666;
  margin: 0 4px;
}

.vertical-pipe {
  color: #444444;
  margin: 0 15px;
  font-weight: 300;
}

.top-banner a {
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.top-banner a:hover {
  opacity: 0.8;
}

.email,
.phone,
.partner-name {
  color: var(--gold);
  font-weight: 600;
}

.country-code {
  font-weight: bold;
  margin-right: 4px;
  font-size: 9px;
}

.partner-text {
  color: var(--gold);
}

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

a {
  text-decoration: none;
  transition: var(--transition);
}

ul {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  line-height: 1.1;
}

/* ================= UTILITIES ================= */
.container {
  width: 92%;
  max-width: 1320px;
  margin: auto;
}

.section {
  padding: 110px 0;
  position: relative;
}

.light {
  background: #fff;
}

.dark {
  background: linear-gradient(rgba(0, 31, 63, 0.94), rgba(0, 31, 63, 0.94)),
    url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=80");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.white {
  color: #fff;
}

.title {
  font-size: 58px;
  margin-bottom: 22px;
}

.section-sub,
.text-muted {
  color: var(--text);
  line-height: 1.9;
  max-width: 760px;
}

.section-sub {
  text-align: left;
}

.white-text,
.white-sub {
  color: #d6dfea;
  line-height: 1.9;
}

.white-sub {
  max-width: 760px;
  margin-bottom: 40px;
}

.mini-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.gold,
.mini-tag.gold {
  color: var(--gold);
}

.nav-wrap {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  /* background-color: #fff; */
  /* padding: 5px; */
  /* border-radius: 15px; */
}

.logo-text h3 {
  font-size: 18px;
  color: var(--gold);
}

.logo-text p {
  font-size: 11px;
  color: var(--gold);
  margin-top: 4px;
  text-transform: uppercase;
  font-weight: bold;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-links a {
  color: #fff;
  font-size: 14px;
  position: relative;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--gold);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: var(--transition);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--gold);
}

.glow-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  border: 1px solid var(--gold);
  background: transparent;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.3px;

  padding: 10px 24px;

  transition: all 0.3s ease;
}

.gold-button:hover {
  background-color: rgba(197, 168, 107, 0.1);
  cursor: pointer;
}

.arrow-icon {
  font-size: 13px;
  line-height: 1;
  display: inline-block;
  transform: translateY(-1px);
}

/* ================= BUTTONS ================= */
.btn-main,
.btn-outline {
  display: inline-block;
  padding: 15px 28px;
  /* border-radius: 40px; */
  font-weight: 700;
}

.btn-main {
  /* background: linear-gradient(135deg, var(--gold), #fff0a2); */
  background: var(--gold);
  color: var(--navy);
  /* box-shadow: 0 15px 30px rgba(255, 215, 0, 0.22); */
}

.btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
}

.btn-main:hover,
.btn-outline:hover {
  transform: translateY(-4px);
}
@media (max-width: 480px) {
  .top-banner {
    padding: 8px 10px;
    font-size: 10px;
    line-height: 1.5;
  }

  .banner-left,
  .banner-right {
    width: 100%;
    justify-content: center;
    text-align: center;
    gap: 4px;
  }

  .header {
    top: 74px;
  }

  .nav-wrap {
    height: auto;
    padding: 12px 0;
    flex-direction: column;
    gap: 12px;
  }

  .logo-wrap {
    justify-content: center;
  }

  .logo-text h3 {
    font-size: 16px;
    color: var(--gold);
  }

  .logo-text p {
    font-size: 9px;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .nav-links a {
    font-size: 12px;
  }

  .glow-button {
    width: 100%;
    justify-content: center;
    padding: 10px;
    font-size: 12px;
  }

  .hero {
    padding-top: 240px;
  }

  .hero h1 {
    font-size: 48px;
    line-height: 1.15;
  }
}
/* ================= HERO ================= */
.hero {
  position: relative;
  min-height: 85vh; /* Gives plenty of height like the reference image */
  width: 100%;
  /* Replace with your image file path */
  background: linear-gradient(rgba(0, 31, 63, 0.78), rgba(0, 31, 63, 0.84)),
    url("./pics/homeBg.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  box-sizing: border-box;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.mini-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(197, 168, 107, 0.4);
  background-color: rgba(7, 21, 32, 0.6);
  color: var(--gold);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 30px;
}

.mini-tag .dot {
  color: var(--gold);
  font-size: 14px;
}

/* 2. Main Large Headline */
.hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  color: #ffffff;
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 40px 0;
  letter-spacing: -0.5px;
}
.in {
  /* font-family: Georgia, "Times New Roman", Times, serif; */
  color: #ffffff;
}
/* The gold italic text styling */
.italic-gold {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--gold); /* Premium gold tone */
}

/* 3. Button Container Layout */
.hero-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

/* Solid Gold Call-To-Action Button */
.btn-main {
  font-family: "Plus Jakarta Sans", sans-serif;
  background-color: var(--gold);
  color: #071520;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 16px 36px;
  border: 1px solid #dcb467;
  transition: all 0.3s ease;
}

.btn-main:hover {
  background-color: var(--gold);
  border-color: var(--gold);
}

/* Transparent Outline Button */
.btn-outline {
  font-family: "Plus Jakarta Sans", sans-serif;
  background-color: transparent;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 16px 36px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.btn-outline:hover {
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05);
}

/* Small screen optimization */
@media (max-width: 600px) {
  .hero-btns {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
  .btn-main,
  .btn-outline {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
  }
}

@media (max-width: 780px) {
  .hero {
    background: linear-gradient(rgba(0, 31, 63, 0.78), rgba(0, 31, 63, 0.84)),
      url("./pics/homeBg.jpeg");
  }
}

@media (max-height: 780px) {
  .hero {
    padding-top: 150px;
  }
}

/* ================= GRID ================= */
.grid {
  display: grid;
  gap: 24px;
  margin-top: 55px;
}

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

.grid.three {
  grid-template-columns: repeat(3, 1fr);
}

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

/* ================= CARDS ================= */
.card,
.service-card,
.insight-card,
.stat-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.card:hover,
.service-card:hover,
.insight-card:hover,
.stat-box:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

.card span {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--navy);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 18px;
}

.card h3,
.service-card h3,
.insight-card h3,
.stat-box h3 {
  font-size: 30px;
  margin-bottom: 10px;
}

.card p,
.insight-card p,
.stat-box p {
  color: var(--text);
  line-height: 1.8;
}

/* ================= ABOUT ================= */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

.stats-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

/* ================= CTA ================= */
.cta {
  padding: 90px 0;
  background: linear-gradient(135deg, var(--gold), #fff0a2);
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.cta h2 {
  font-size: 52px;
}

/* ================= FOOTER ================= */
.footer {
  background: var(--navy3);
  color: #fff;
  padding: 80px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}

.footer h3,
.footer h4 {
  margin-bottom: 16px;
}

.footer p,
.footer a {
  color: #d4dce6;
  line-height: 1.9;
  display: block;
  margin-bottom: 8px;
}

.footer a:hover {
  color: var(--gold);
}

.copy {
  margin-top: 45px;
  text-align: center;
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #c8d2de;
  font-size: 14px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1200px) {
  .hero-grid,
  .about-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .title {
    font-size: 40px;
  }

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

  .grid.two,
  .grid.three,
  .grid.four,
  .footer-grid,
  .cta-inner {
    grid-template-columns: 1fr;
    display: grid;
  }

  .section {
    padding: 80px 0;
  }

  .cta h2 {
    font-size: 36px;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 40px;
  }

  .title {
    font-size: 32px;
  }

  .btn-main,
  .btn-outline {
    width: 100%;
    text-align: center;
  }

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

/* ================= ABOUT (HOME) ================= */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 55px;
  align-items: center;
}

.stats-wrap {
  display: grid;
  gap: 22px;
}

.stat-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 28px;
  color: #fff;
  text-align: center; /* Centers numbers and titles inside the cards */
  padding: 40px 24px;
}

.stat-box h3 {
  font-size: 38px;
  color: var(--gold);
  margin-bottom: 8px;
}

/* ================= INSIGHTS ================= */
.section-sub {
  max-width: 700px;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 50px;
}

.insight-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  font-size: 13px;
}

.insight-meta span {
  font-weight: 700;
}

.read-link {
  color: var(--navy);
  font-weight: 700;
}

/* ================= CTA ================= */
.cta {
  padding: 100px 0;
}

.cta-inner {
  background: linear-gradient(135deg, #001f3f, #0b2c53);
  color: #fff;
  border-radius: 30px;
  padding: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.cta-inner h2 {
  font-size: 56px;
}

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

.footer-premium {
  background: #02162d;
  color: #fff;
  margin-top: 100px;
  position: relative;
}

/* TOP STRIP */
.footer-top-strip {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 55px 0;
  background: #02162d;
}

.footer-strip-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-mini {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
}

.footer-top-strip h2 {
  font-size: 44px;
  margin: 10px 0 10px;
  color: #fff;
}

.footer-top-strip p {
  color: #cfd9e4;
  max-width: 650px;
  line-height: 1.8;
}

.footer-btn {
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: #001f3f;
  padding: 16px 30px;
  border-radius: 50px;
  font-weight: 700;
  box-shadow: 0 15px 30px rgba(255, 215, 0, 0.18);
}

.footer-btn:hover {
  transform: translateY(-4px);
}

/* MAIN */
.footer-main-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 60px;
  padding: 80px 0;
  align-items: start;
}

.footer-main-grid h4 {
  color: var(--gold);
  margin-bottom: 20px;
  font-size: 22px;
}

.footer-main-grid a {
  display: block;
  color: #d5deea;
  margin-bottom: 14px;
  font-size: 15px;
}

.footer-main-grid a:hover {
  color: var(--gold);
  transform: translateX(4px);
}

.footer-brand p {
  color: #c7d2de;
  line-height: 1.9;
  margin: 22px 0;
}

.footer-logo-wrap {
  display: flex;
  align-items: center;
  gap: 15px;
}

.footer-logo-wrap img {
  width: 52px;
  height: 52px;
  /* border-radius: 15px; */
  object-fit: cover;
  /* background-color: #fff; */
  /* padding: 5px; */
}

.footer-logo-wrap h3 {
  color: var(--gold);
  font-size: 24px;
  margin-bottom: 4px;
}

.footer-logo-wrap span {
  font-size: 12px;
  color: #b9c5d2;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-badges span {
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
  border-radius: 40px;
  font-size: 13px;
  color: #dbe5ef;
}

/* BOTTOM */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 22px 0;
}

.footer-bottom-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-bottom p {
  color: #aab8c7;
  font-size: 14px;
}

.footer-bottom-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.footer-bottom-links a {
  color: #aab8c7;
  font-size: 14px;
}

.footer-bottom-links a:hover {
  color: var(--gold);
}

/* MOBILE */
@media (max-width: 1100px) {
  .footer-main-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .footer-main-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .footer-top-strip h2 {
    font-size: 34px;
  }

  .footer-strip-wrap {
    align-items: flex-start;
  }

  .footer-bottom-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==================================================
   ABOUT PAGE ONLY
================================================== */

.about-premium .about-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(rgba(0, 31, 63, 0.82), rgba(0, 31, 63, 0.88)),
    url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1600&q=80");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.about-premium .about-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.about-premium .about-left h1 {
  font-size: 74px;
  color: #fff;
  line-height: 1;
  margin: 18px 0 24px;
}

.about-premium .about-left p {
  color: #fff;
  line-height: 1;
  margin: 18px 0 24px;
}

.about-premium .about-left h1 em {
  color: var(--gold);
}

.about-premium .split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.about-premium .value-list {
  display: grid;
  gap: 18px;
}

.about-premium .value-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
  display: flex;
  gap: 18px;
  box-shadow: var(--shadow);
}

.about-premium .team-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 24px;
  padding: 34px;
}

.about-premium .avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-bottom: 18px;
}

.about-premium .about-cta {
  padding: 100px 0;
  background: #fff;
}

/* ================= ABOUT FAQ CTA SECTION ================= */

.about-faq {
  padding: 100px 20px;
  background: linear-gradient(180deg, #ffffff, #f8f9fc);
}

.about-faq .mini-cta-box {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
  background: #ffffff;
  padding: 60px 50px;
  border-radius: 28px;
  border: 1px solid #edf1f4;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.about-faq .mini-cta-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--gold), #ffe58a);
}

.about-faq .mini-cta-box h3 {
  font-size: 48px;
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 18px;
  font-family: "Cormorant Garamond", serif;
}

.about-faq .mini-cta-box p {
  max-width: 620px;
  margin: 0 auto 30px;
  color: #6d7b8a;
  font-size: 17px;
  line-height: 1.9;
}

.about-faq .mini-cta-box .btn-main {
  display: inline-block;
  padding: 16px 34px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s ease;
}

.about-faq .mini-cta-box .btn-main:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

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

@media (max-width: 768px) {
  .about-faq {
    padding: 75px 18px;
  }

  .about-faq .mini-cta-box {
    padding: 42px 24px;
    border-radius: 22px;
  }

  .about-faq .mini-cta-box h3 {
    font-size: 34px;
  }

  .about-faq .mini-cta-box p {
    font-size: 15px;
    line-height: 1.8;
  }

  .about-faq .mini-cta-box .btn-main {
    width: 100%;
    text-align: center;
  }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1150px) {
  .nav-links {
    display: none;
  }

  .hero-grid,
  .about-grid,
  .about-premium .about-hero-grid,
  .about-premium .split-grid {
    grid-template-columns: 1fr;
  }

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

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

  .cta-inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .title,
  .hero h1,
  .about-premium .about-left h1,
  .cta-inner h2 {
    font-size: 42px;
  }

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

  .section {
    padding: 80px 0;
  }

  .hero,
  .dark,
  .about-premium .about-hero {
    background-attachment: scroll;
  }

  .logo-text {
    display: none;
  }

  .cta-inner {
    padding: 40px 24px;
  }
}

/* PAGE WRAP */
#page-services {
  background: #fff;
}

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

.services-page-hero {
  min-height: 92vh;
  padding-top: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(rgba(0, 31, 63, 0.82), rgba(0, 31, 63, 0.88)),
    url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1800&q=80");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.services-page-hero-inner {
  width: 92%;
  max-width: 1000px;
  margin: auto;
}

.services-page-hero .section-tag {
  color: var(--navy);
  background-color: var(--gold);
  letter-spacing: 3px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.services-page-hero h1 {
  font-size: 72px;
  line-height: 1;
  color: #fff;
  margin-bottom: 24px;
}

.services-page-hero h1 em {
  font-style: normal;
  color: var(--gold);
}

.services-page-hero p {
  color: #d7dfe8;
  font-size: 18px;
  line-height: 1.9;
  max-width: 760px;
  margin: auto;
}

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

.all-services {
  padding: 110px 0;
  width: 92%;
  max-width: 1320px;
  margin: auto;
}

/* CATEGORY BLOCK */

.service-category {
  margin-bottom: 90px;
}

.cat-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 35px;
  padding-bottom: 18px;
  border-bottom: 1px solid #edf1f4;
}

.cat-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: linear-gradient(135deg, var(--navy), #0d3968);
  color: var(--gold);
  box-shadow: 0 15px 30px rgba(0, 31, 63, 0.12);
}

.cat-header h2 {
  font-size: 48px;
  color: var(--navy);
  line-height: 1;
}

/* SERVICE GRID */

.services-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* CARD */

.srv-card {
  background: #fff;
  border: 1px solid #edf1f4;
  border-radius: 24px;
  padding: 34px 28px;
  transition: 0.35s ease;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.srv-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), #fff2a2);
  transform: scaleX(0);
  transform-origin: left;
  transition: 0.35s;
}

.srv-card:hover::before {
  transform: scaleX(1);
}

.srv-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 50px rgba(0, 0, 0, 0.08);
}

.srv-card h4 {
  font-size: 30px;
  color: var(--navy);
  margin-bottom: 14px;
  line-height: 1.1;
}

.srv-card p {
  color: #6d7b8a;
  line-height: 1.9;
  font-size: 15px;
}

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

/* Base Section Wrapper to provide the dark canvas */
.services-matrix-section {
  background-color: var(--navy);
}

/* CTA Banner Main Box */
.cta-banner.section-full {
  margin: 60px auto 100px;
  width: 92%;
  max-width: 1200px;
  padding: 60px 40px;

  text-align: center;

  /* Subtle dark gradient matching the reference */
  background: linear-gradient(115deg, #0f223f 0%, #152744 50%, #111e35 100%);

  /* Semi-transparent border outline */
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

/* Heading Styling */
.cta-banner h2 {
  font-family: "Playfair Display", serif; /* Elegant serif typeface matching image */
  font-size: 32px; /* Scaled down from 58px to match screenshot scale */
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 16px 0;
  letter-spacing: 0.3px;
}

/* Subtext Paragraph Styling */
.cta-banner p {
  max-width: 680px;
  margin: 0 auto 30px;
  color: #798da3; /* Slightly muted tone to give depth to heading */
  font-size: 15px;
  line-height: 1.6;
}

/* Button Component */
.cta-banner .btn-dark {
  background-color: var(--gold); /* Specific warm golden-mustard shade */
  color: #121e36; /* Dark navy text */
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 32px;
  border-radius: 6px; /* Structured square-rounded corners */
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(204, 164, 76, 0.15);
}

/* Button Hover State */
.cta-banner .btn-dark:hover {
  background-color: #dbae53;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(204, 164, 76, 0.25);
}

/* --- Media Queries for Perfect Responsiveness --- */

/* Tablet Viewports */
@media (max-width: 768px) {
  .cta-banner.section-full {
    padding: 50px 30px;
    width: 95%;
    margin-bottom: 60px;
  }

  .cta-banner h2 {
    font-size: 26px;
  }

  .cta-banner p {
    font-size: 14px;
    padding: 0 10px;
  }
}

/* Mobile Viewports */
@media (max-width: 480px) {
  .cta-banner.section-full {
    padding: 40px 20px;
    border-radius: 8px;
  }

  .cta-banner h2 {
    font-size: 22px;
  }

  .cta-banner p {
    font-size: 13px;
    margin-bottom: 24px;
  }

  .cta-banner .btn-dark {
    width: 100%; /* Makes button fluid/full-width on pocket screens */
    box-sizing: border-box;
    padding: 14px 20px;
  }
}

/* ================= AML CTA BOX ================= */

.mini-cta-box {
  max-width: 900px;
  margin: 70px auto 0;
  padding: 60px 50px;
  text-align: center;
  background: linear-gradient(135deg, #ffffff, #f8f9fc);
  border: 1px solid #edf1f4;
  border-radius: 30px;
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.mini-cta-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--gold), #ffe58a);
}

.mini-cta-box::after {
  content: "🛡️";
  position: absolute;
  top: 22px;
  right: 28px;
  font-size: 34px;
  opacity: 0.08;
}

.mini-cta-box h3 {
  font-size: 48px;
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 18px;
  font-family: "Cormorant Garamond", serif;
}

.mini-cta-box p {
  max-width: 700px;
  margin: 0 auto 32px;
  color: #6d7b8a;
  font-size: 17px;
  line-height: 1.9;
}

.mini-cta-box .btn-main {
  display: inline-block;
  padding: 16px 34px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s ease;
}

.mini-cta-box .btn-main:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}

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

@media (max-width: 768px) {
  .mini-cta-box {
    margin-top: 50px;
    padding: 42px 24px;
    border-radius: 24px;
  }

  .mini-cta-box h3 {
    font-size: 34px;
  }

  .mini-cta-box p {
    font-size: 15px;
    line-height: 1.8;
  }

  .mini-cta-box .btn-main {
    width: 100%;
    text-align: center;
  }

  .mini-cta-box::after {
    top: 18px;
    right: 18px;
    font-size: 26px;
  }
}

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

@media (max-width: 1150px) {
  .services-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-page-hero h1 {
    font-size: 56px;
  }

  .cat-header h2 {
    font-size: 38px;
  }
}

@media (max-width: 768px) {
  .services-page-hero,
  .dark {
    background-attachment: scroll;
  }

  .services-page-hero {
    min-height: auto;
    padding: 140px 0 90px;
  }

  .services-page-hero h1,
  .cta-banner h2 {
    font-size: 40px;
  }

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

  .cat-header {
    align-items: flex-start;
  }

  .cat-header h2 {
    font-size: 32px;
  }

  .all-services {
    padding: 80px 0;
  }

  .cta-banner.section-full {
    padding: 45px 24px;
    margin-bottom: 80px;
  }
}

@media (max-width: 480px) {
  /* Ensure the top banner handles wrapping cleanly */
  .top-banner {
    padding: 8px 12px;
    font-size: 11px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }

  .banner-left,
  .banner-right {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }

  /* Hide minor separators on mobile to save horizontal space */
  .top-banner .separator,
  .top-banner .vertical-pipe {
    display: none;
  }

  /* Keep the header positioned fluidly below the top banner */
  .header {
    position: absolute; /* Changes from fixed to absolute on mobile to prevent content clipping */
    top: auto; /* Clears the hardcoded pixel restrictions */
    left: 0;
    width: 100%;
    background: rgba(
      0,
      31,
      63,
      0.96
    ); /* Slightly more solid background for legible reading text overlap */
    padding: 12px 0;
  }

  /* Allow the navigation wrapper to grow naturally with its child text elements */
  .nav-wrap {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 4px;
  }

  .logo-text h3 {
    font-size: 18px;
    margin: 0;
    color: var(--gold);
  }

  .logo-text p {
    font-size: 10px;
    margin: 0;
  }

  /* Give the links a neat, clickable layout grid */
  .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 4px 0;
  }

  .nav-links a {
    font-size: 13px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    color: #ffffff;
    text-decoration: none;
  }

  /* .nav-links a.active {
    background: #cca44c;
    color: #0d2e6b;
  } */

  /* Button scales down seamlessly */
  .glow-button {
    width: 100%;
    max-width: 280px;
    justify-content: center;
    padding: 10px 16px;
    font-size: 12px;
    box-sizing: border-box;
  }

  /* Pushes the hero body down safely so the fluid text blocks never overflow behind the banner canvas */
  .blog-hero,
  .hero {
    padding-top: 260px !important;
  }

  .hero h1 {
    font-size: 32px;
    line-height: 1.2;
  }
}

/* ==================================================
   FREE ZONE PAGE CSS
   Add below existing global stylesheet
================================================== */

#page-freezone {
  background: #fff;
}

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

.fz-hero {
  min-height: 95vh;
  padding-top: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(rgba(0, 31, 63, 0.82), rgba(0, 31, 63, 0.88)),
    url("https://images.unsplash.com/photo-1512453979798-5ea266f8880c?auto=format&fit=crop&w=1800&q=80");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.fz-hero-inner {
  width: 92%;
  max-width: 1100px;
  margin: auto;
}

.fz-hero .section-tag {
  background-color: var(--navy);
  color: var(--gold);
  margin-bottom: 18px;
}

.fz-hero h1 {
  font-size: 72px;
  line-height: 1;
  color: #fff;
  margin-bottom: 24px;
}

.fz-hero h1 em {
  color: var(--gold);
  font-style: normal;
}

.fz-hero p {
  max-width: 820px;
  margin: auto;
  color: #d6dce5;
  font-size: 18px;
  line-height: 1.9;
}

/* ================= CONTENT ================= */

.fz-content {
  width: 92%;
  max-width: 1320px;
  margin: auto;
  padding: 110px 0;
}

.fz-content .section-tag {
  background-color: var(--navy);
  color: var(--gold);
  margin-bottom: 18px;
}

.fz-content .section-title {
  margin-bottom: 50px;
}

.fz-content .section-title em {
  color: var(--gold);
  font-style: normal;
}

/* ================= ZONES GRID ================= */

.fz-zones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.fz-card {
  background: #fff;
  border: 1px solid #edf1f4;
  border-radius: 24px;
  padding: 32px 28px;
  transition: 0.35s ease;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.fz-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), #fff0a0);
  transform: scaleX(0);
  transform-origin: left;
  transition: 0.35s;
}

.fz-card:hover::before {
  transform: scaleX(1);
}

.fz-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 50px rgba(0, 0, 0, 0.08);
}

.badge {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 30px;
  background: #eef4fa;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 18px;
}

.fz-card h4 {
  font-size: 30px;
  color: var(--navy);
  margin-bottom: 14px;
  line-height: 1.1;
}

.fz-card p {
  color: #6d7b8a;
  line-height: 1.85;
  font-size: 15px;
}

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

.fz-services-strip {
  padding: 110px 0;
  background: linear-gradient(rgba(0, 31, 63, 0.94), rgba(0, 31, 63, 0.94)),
    url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=80");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.fz-services-strip-inner {
  width: 92%;
  max-width: 1320px;
  margin: auto;
}

.fz-services-strip .section-title {
  margin-bottom: 50px;
}

.fz-srv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.fz-srv-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 32px 28px;
  backdrop-filter: blur(12px);
  transition: 0.35s ease;
}

.fz-srv-item:hover {
  transform: translateY(-10px);
  border-color: var(--gold);
}

.fz-srv-item h4 {
  font-size: 28px;
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.15;
}

.fz-srv-item p {
  color: #d6dce5;
  line-height: 1.85;
  font-size: 15px;
}

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

#page-freezone .cta-banner.section-full {
  width: 92%;
  max-width: 1320px;
  margin: 110px auto;
}

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

@media (max-width: 1150px) {
  .fz-zones,
  .fz-srv-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fz-hero h1 {
    font-size: 56px;
  }
}

@media (max-width: 768px) {
  .fz-hero,
  .fz-services-strip {
    background-attachment: scroll;
  }

  .fz-hero {
    min-height: auto;
    padding: 140px 0 90px;
  }

  .fz-hero h1 {
    font-size: 40px;
  }

  .fz-zones,
  .fz-srv-grid {
    grid-template-columns: 1fr;
  }

  .fz-content,
  .fz-services-strip {
    padding: 80px 0;
  }

  #page-freezone .cta-banner.section-full {
    margin: 80px auto;
  }
}

.industries-hero {
  min-height: 88vh;
  padding-top: 130px;
  display: flex;
  align-items: center;
  text-align: center;
  background: linear-gradient(rgba(0, 31, 63, 0.82), rgba(0, 31, 63, 0.88)),
    url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1800&q=80");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* CTA banner */

.cta-banner {
  padding: 95px 0;
  text-align: center;
  background: linear-gradient(rgba(0, 31, 63, 0.93), rgba(0, 31, 63, 0.93)),
    url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=80");
  background-size: cover;
  background-position: center;
}

.cta-banner h2 {
  font-size: 58px;
  color: #fff;
  margin-bottom: 18px;
}

.cta-banner p {
  font-size: 18px;
  line-height: 1.9;
  color: #d7dfe8;
  max-width: 760px;
  margin: 0 auto 34px;
}

.btn-dark {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 40px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold), #fff0a6);
  color: var(--navy);
  box-shadow: 0 18px 30px rgba(255, 215, 0, 0.18);
}

.btn-dark:hover {
  transform: translateY(-4px);
}

/* ================= BUSINESS SETUP CTA BOX ================= */

.mini-cta-box {
  max-width: 920px;
  margin: 70px auto 0;
  padding: 62px 52px;
  text-align: center;
  background: linear-gradient(135deg, #ffffff, #f7f9fc);
  border: 1px solid #edf1f4;
  border-radius: 30px;
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.mini-cta-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--gold), #ffe58a);
}

.mini-cta-box::after {
  content: "🏢";
  position: absolute;
  top: 22px;
  right: 28px;
  font-size: 34px;
  opacity: 0.08;
}

.mini-cta-box h3 {
  font-size: 50px;
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 18px;
  font-family: "Cormorant Garamond", serif;
}

.mini-cta-box p {
  max-width: 720px;
  margin: 0 auto 32px;
  color: #6d7b8a;
  font-size: 17px;
  line-height: 1.9;
}

.mini-cta-box .btn-main {
  display: inline-block;
  padding: 16px 36px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s ease;
}

.mini-cta-box .btn-main:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}

/* ================= MOBILE ================= */
@media (max-height: 480px) {
  .industries-hero-inner {
    padding-top: 50px;
  }
}
@media (max-width: 768px) {
  .mini-cta-box {
    margin-top: 50px;
    padding: 42px 24px;
    border-radius: 24px;
  }

  .mini-cta-box h3 {
    font-size: 34px;
  }

  .mini-cta-box p {
    font-size: 15px;
    line-height: 1.8;
  }

  .mini-cta-box .btn-main {
    width: 100%;
    text-align: center;
  }

  .mini-cta-box::after {
    top: 18px;
    right: 18px;
    font-size: 26px;
  }
}

/* responsive */

@media (max-width: 1150px) {
  .industries-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* .industries-hero h1,
  .cta-banner h2 {
    font-size: 52px;
  } */
}

@media (max-width: 768px) {
  .industries-cards {
    grid-template-columns: 1fr;
  }

  .industries-hero,
  .cta-banner {
    background-attachment: scroll;
  }

  h1,
  .section-title,
  .cta-banner h2 {
    font-size: 40px;
  }

  .cta-banner {
    padding: 80px 0;
  }

  /* .ind-card {
    padding: 28px 24px;
  } */
}

.blog-content {
  padding: 110px 0;
  background: #fff;
  width: 92%;
  max-width: 1320px;
  margin: auto;
}

/* filter */

.blog-filter {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 55px;
}

.blog-tag-btn {
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 24px;
  border-radius: 40px;
  background: #f5f7fa;
  color: var(--navy);
  font-weight: 700;
  font-family: "Inter", sans-serif;
  transition: 0.35s ease;
}

.blog-tag-btn:hover,
.blog-tag-btn.active {
  background: linear-gradient(135deg, var(--gold), #fff0a6);
  color: var(--navy);
  transform: translateY(-3px);
  box-shadow: 0 14px 24px rgba(255, 215, 0, 0.16);
}

.blog-read {
  font-weight: 700;
  color: var(--navy);
}

.blog-read:hover {
  color: #b99400;
}

/* ==================================================
   CAREERS PAGE
================================================== */

/* ================= PAGE ================= */

.careers-page {
  background: #f8f9fc;
}

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

.careers-hero {
  min-height: 90vh;
  padding-top: 160px;
  display: flex;
  align-items: center;
  background: linear-gradient(rgba(0, 31, 63, 0.82), rgba(0, 31, 63, 0.88)),
    url("https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1800&q=80");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.careers-hero-inner {
  max-width: 820px;
}

/* .careers-hero-inner .section-tag {
  background-color: var(--gold);
  color: var(--navy);
} */
.wraper {
  /* background-color: #fff; Matches your core dark section background */
  padding: 100px 0;
  width: 100%;
  box-sizing: border-box;
}
.status {
  background-color: var(--navy);
  padding: 100px 0;
  width: 100%;
  box-sizing: border-box;
}
.careers-content .section-tag,
.careers-hero-inner .section-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(197, 168, 107, 0.4);
  /* background: rgba(7, 21, 32, 0.65); */
  color: var(--gold);
  padding: 8px 20px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12px;
  font-weight: 700;
}

.careers-content .status-title {
  color: #fff;
}

.careers-hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(52px, 6vw, 78px);
  line-height: 1.05;
  color: #fff;
  margin: 18px 0 24px;
}

.careers-hero h1 em {
  color: var(--gold);
  font-style: normal;
}

.careers-hero p {
  max-width: 720px;
  color: #d6dce5;
  font-size: 18px;
  line-height: 1.9;
}

/* ================= COMMON SECTION ================= */
/* .careers-content .section-tag {
  background-color: var(--gold);
  color: var(--navy);
} */

.careers-content,
.careers-form-section {
  padding: 110px 0;
}

.section-sub {
  max-width: 760px;
  color: #6d7b8a;
  line-height: 1.9;
  margin-bottom: 50px;
}

/* ================= PERKS ================= */

.careers-perks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 45px;
}

.perk-card {
  background: var(--navy);
  border-radius: 24px;
  padding: 36px 30px;
  border: 1px solid rgba(0, 31, 63, 0.08);
  box-shadow: 0 15px 40px rgba(0, 31, 63, 0.06);
  transition: 0.4s ease;
}

.perk-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(0, 31, 63, 0.12);
}

.perk-icon {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--gold), #ffe58a);
  color: var(--navy);
  font-size: 30px;
  margin-bottom: 12px;

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

.perk-card h4 {
  font-size: 28px;
  margin-bottom: 12px;
  color: #fff;
}

.perk-card p {
  color: #6d7b8a;
  line-height: 1.8;
}

/* ================= CULTURE STRIP ================= */

.culture-strip {
  padding: 90px 0;
  background: linear-gradient(135deg, #001f3f, #08294b);
  color: #fff;
}

.culture-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.culture-strip h2 {
  font-size: 54px;
  line-height: 1.1;
  margin-bottom: 20px;
}

.culture-strip h2 em {
  color: var(--gold);
  font-style: normal;
}

.culture-strip p {
  color: #d6dce5;
  line-height: 1.9;
  margin-bottom: 18px;
}

.culture-points {
  display: grid;
  gap: 18px;
}

.culture-point {
  padding: 24px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.culture-point h4 {
  font-size: 24px;
  color: var(--gold);
  margin-bottom: 8px;
}

.culture-point p {
  margin: 0;
}

/* ================= NO OPENINGS ================= */

.no-opening-box {
  max-width: 900px;
  margin: 40px auto 0;
  padding: 60px;
  border-radius: 30px;

  /* background: rgba(255, 255, 255, 0.05); */
  background: #fff;

  backdrop-filter: blur(14px);

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

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

.no-opening-icon {
  width: 82px;
  height: 82px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  box-shadow: 0 15px 30px rgba(0, 31, 63, 0.15);
}

.no-opening-box h3 {
  font-size: 42px;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 18px;
}

.no-opening-box p {
  max-width: 700px;
  margin: 0 auto 28px;
  color: #6d7b8a;
  line-height: 1.9;
  font-size: 16px;
}

.future-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
}

.future-tags span {
  background: rgba(255, 215, 0, 0.12);
  color: var(--gold);
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.no-opening-box .btn-main {
  min-width: 220px;
}

/* ================= FORM ================= */

.careers-form-section {
  background: linear-gradient(180deg, #f8f9fc, #ffffff);
}

.careers-form-inner {
  max-width: 920px;
  margin: auto;

  background: #fff;

  border-radius: 30px;

  border-top: 5px solid var(--gold);

  padding: 70px 60px;

  box-shadow: 0 25px 60px rgba(0, 31, 63, 0.08);
}

.careers-form-inner h2 {
  font-size: 56px;
  margin-bottom: 14px;
}

.careers-form-inner p {
  color: #6d7b8a;
  line-height: 1.9;
  margin-bottom: 35px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.form-group {
  margin-bottom: 22px;
}

.form-group label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid #dfe5eb;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  outline: none;
  transition: 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.12);
}

.form-group textarea {
  min-height: 160px;
  resize: vertical;
}

.form-submit {
  background: linear-gradient(135deg, var(--gold), #ffe58a);

  color: var(--navy);

  border-radius: 50px;

  padding: 18px 40px;

  font-weight: 700;

  box-shadow: 0 18px 35px rgba(255, 215, 0, 0.25);
}

.form-submit:hover {
  transform: translateY(-5px);
}

.form-submit:hover {
  transform: translateY(-4px);
}

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

@media (max-width: 1150px) {
  .careers-perks {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 768px) {
  .careers-hero,
  .dark {
    background-attachment: scroll;
  }

  .careers-hero h1,
  .section-title,
  .culture-strip h2,
  .careers-form-inner h2,
  .no-opening-box h3 {
    font-size: 42px;
  }

  .careers-content,
  .careers-form-section {
    padding: 80px 0;
  }

  .careers-perks,
  .form-row {
    grid-template-columns: 1fr;
  }

  .careers-form-inner {
    padding: 38px 24px;
  }

  .no-opening-box {
    padding: 38px 22px;
    border-radius: 24px;
  }

  .future-tags span {
    font-size: 12px;
    padding: 9px 14px;
  }
}

/* ================= CONTACT PAGE ================= */
#page-contact {
  background: #fff;
}

/* HERO */
.contact-hero {
  min-height: 78vh;
  padding-top: 140px;
  display: flex;
  align-items: center;
  background: linear-gradient(rgba(0, 31, 63, 0.84), rgba(0, 31, 63, 0.9)),
    url("https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=1800&q=80");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.contact-hero-inner {
  max-width: 820px;
}

.contact-hero h1 {
  font-size: 74px;
  line-height: 1;
  color: #fff;
  margin: 18px 0 22px;
}

.contact-hero h1 em {
  color: var(--gold);
  font-style: normal;
}

.contact-hero p {
  font-size: 18px;
  line-height: 1.9;
  color: #d9e0e8;
  max-width: 720px;
}

/* MAIN */
.contact-main {
  padding: 110px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  align-items: start;
}

.section-sub {
  color: #6d7b8a;
  line-height: 1.9;
  margin-bottom: 34px;
}

/* LEFT SIDE */
.contact-card {
  background: #fff;
  border: 1px solid #edf1f4;
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.05);
}

.contact-item {
  display: flex;
  gap: 18px;
  padding: 22px 18px;
  border-bottom: 1px solid #eef2f6;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--navy);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.contact-item h4 {
  font-size: 20px;
  margin-bottom: 6px;
  color: var(--navy);
}

.contact-item a,
.contact-item p {
  color: #6d7b8a;
  text-decoration: none;
  line-height: 1.7;
}

.contact-item a:hover {
  color: var(--gold);
}

.consult-box {
  margin-top: 28px;
  padding: 34px;
  border-radius: 28px;
  background: linear-gradient(135deg, #001f3f, #0b335d);
  color: #fff;
  box-shadow: 0 20px 45px rgba(0, 31, 63, 0.14);
}

.consult-box h4 {
  font-size: 32px;
  margin-bottom: 14px;
}

.consult-box p {
  color: #dbe3eb;
  line-height: 1.9;
}

/* RIGHT FORM */
.contact-form-box {
  background: #fff;
  border: 1px solid #edf1f4;
  border-radius: 30px;
  padding: 48px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.06);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--navy);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid #dfe5eb;
  font-size: 15px;
  font-family: "Inter", sans-serif;
  outline: none;
  transition: 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.12);
}

.form-group textarea {
  min-height: 160px;
  resize: vertical;
}

.form-submit {
  padding: 16px 34px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--gold), #fff1a6);
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(255, 215, 0, 0.22);
  transition: 0.3s;
}

.form-submit:hover {
  transform: translateY(-4px);
}

/* CTA */
.contact-cta {
  padding: 100px 0;
  background: #f8f9fc;
}

.contact-cta-inner {
  text-align: center;
  max-width: 900px;
}

.contact-cta h2 {
  font-size: 58px;
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 18px;
}

.contact-cta p {
  color: #6d7b8a;
  line-height: 1.9;
  max-width: 720px;
  margin: 0 auto 32px;
}

/* RESPONSIVE */
@media (max-width: 1150px) {
  .contact-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .contact-hero {
    min-height: auto;
    padding: 130px 0 90px;
    background-attachment: scroll;
  }

  .contact-hero h1,
  .section-title,
  .contact-cta h2 {
    font-size: 42px;
  }

  .contact-main,
  .contact-cta {
    padding: 80px 0;
  }

  .contact-form-box {
    padding: 34px 24px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-item {
    gap: 14px;
    padding: 18px 14px;
  }

  .contact-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .consult-box h4 {
    font-size: 28px;
  }
}

#page-faq {
  font-family: "Poppins", sans-serif;
  color: #1e293b;
  background: #f8fafc;
}

/* ================= HERO ================= */
.faq-hero {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  padding: 90px 20px 70px;
  text-align: center;
}

.faq-hero-inner {
  max-width: 850px;
  margin: auto;
}

/* .section-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 18px;
  text-transform: uppercase;
} */

.faq-hero h1 {
  font-size: 52px;
  font-weight: 700;
  margin-bottom: 18px;
  line-height: 1.2;
}

.faq-hero h1 em {
  color: #38bdf8;
  font-style: normal;
}

.faq-hero p {
  font-size: 18px;
  max-width: 700px;
  margin: auto;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.8;
}

/* ================= CONTENT ================= */
.faq-content {
  max-width: 1100px;
  margin: 70px auto;
  padding: 0 20px;
}

.faq-group {
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  margin-bottom: 35px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}

.faq-group-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #0f172a;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
}

/* ================= FAQ ITEM ================= */
.faq-item {
  border-bottom: 1px solid #e5e7eb;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-q {
  width: 100%;
  border: none;
  background: transparent;
  padding: 22px 0;
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  color: #1e293b;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  transition: 0.3s ease;
}

.faq-q:hover {
  color: #0ea5e9;
}

.chevron {
  font-size: 28px;
  font-weight: 300;
  color: #0ea5e9;
  transition: 0.3s ease;
  min-width: 30px;
  text-align: center;
}

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

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding: 0 18px;
}

.faq-item.active .faq-a {
  padding: 0 18px 18px;
}

/* ================= CTA ================= */
.cta-banner {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  text-align: center;
  padding: 70px 20px;
  color: #fff;
  margin-top: 60px;
}

.cta-banner h2 {
  font-size: 42px;
  margin-bottom: 15px;
  font-weight: 700;
}

.cta-banner p {
  font-size: 18px;
  margin-bottom: 28px;
  opacity: 0.95;
}

.btn-dark {
  display: inline-block;
  background: #0f172a;
  color: #fff;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  transition: 0.3s ease;
}

.btn-dark:hover {
  background: #020617;
  transform: translateY(-3px);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 992px) {
  .faq-hero h1 {
    font-size: 42px;
  }

  .cta-banner h2 {
    font-size: 34px;
  }
}

@media (max-width: 768px) {
  .faq-hero {
    padding: 70px 20px 55px;
  }

  .faq-hero h1 {
    font-size: 34px;
  }

  .faq-group {
    padding: 22px;
  }

  .faq-group-title {
    font-size: 22px;
  }

  .faq-q {
    font-size: 16px;
    line-height: 1.5;
  }

  .faq-a {
    font-size: 15px;
    padding-right: 0;
  }

  .cta-banner h2 {
    font-size: 28px;
  }

  .cta-banner p {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .faq-hero h1 {
    font-size: 28px;
  }

  /* .section-tag {
    font-size: 11px;
  } */

  .faq-content {
    margin: 45px auto;
  }

  .faq-q {
    padding: 18px 0;
  }
}

/* FIXED + RR ASSOCIATES NAVY/GOLD VERSION */

#page-aml {
  background: #f8fafc;
  color: var(--navy);
}

.aml-hero {
  background: linear-gradient(135deg, var(--navy3), var(--navy));
  color: #fff;
  padding: 100px 20px 90px;
  text-align: center;
}

.aml-hero-inner {
  max-width: 900px;
  margin: auto;
}

#page-aml .section-tag,
.aml-hero-inner .section-tag,
.aml-text .section-tag,
.aml-penalties-inner .section-tag,
.cta-banner .section-tag {
  background-color: var(--gold);
  color: var(--navy);
}

/* .section-tag {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 22px;
} */

.aml-hero h1 {
  font-size: 56px;
  line-height: 1.15;
  margin-bottom: 22px;
  font-weight: 700;
}

.aml-hero h1 em {
  color: var(--gold);
  font-style: normal;
}

.aml-hero p {
  max-width: 760px;
  margin: auto;
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82);
}

.aml-content {
  padding: 90px 20px;
}

.aml-split {
  max-width: 1250px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: start;
}

.aml-text p {
  font-size: 17px;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 20px;
}

.aml-checklist {
  list-style: none;
  padding: 0;
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}

.aml-checklist li {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 22px rgba(0, 31, 63, 0.05);
  font-weight: 500;
  color: var(--navy);
  font-size: 15px;
  border-left: 4px solid var(--gold);
}

.aml-services {
  display: grid;
  gap: 18px;
}

.aml-srv {
  background: #fff;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 12px 28px rgba(0, 31, 63, 0.06);
  transition: 0.3s ease;
  border-top: 4px solid var(--gold);
}

.aml-srv:hover {
  transform: translateY(-5px);
}

.aml-srv h4 {
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--navy);
}

.aml-srv p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
}

.aml-penalties {
  padding: 80px 20px;
  background: #fff9e8;
}

.aml-penalties-inner {
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

.penalty-grid {
  margin-top: 45px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.penalty-card {
  background: #fff;
  padding: 35px 28px;
  border-radius: 22px;
  box-shadow: 0 12px 26px rgba(0, 31, 63, 0.05);
  border-top: 4px solid var(--gold);
}

.amount {
  font-size: 40px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 15px;
}

.penalty-card h4 {
  font-size: 22px;
  margin-bottom: 14px;
  color: var(--navy);
}

.penalty-card p {
  color: var(--text);
  line-height: 1.8;
  font-size: 15px;
}

.cta-banner {
  padding: 90px 20px;
  text-align: center;
  background-color: var(--navy);
  color: #fff;
}

.cta-banner h2 {
  font-size: 46px;
  margin-bottom: 18px;
  font-weight: 700;
}

.cta-banner p {
  max-width: 700px;
  margin: 0 auto 28px;
  font-size: 18px;
  line-height: 1.8;
}

.btn-dark {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  text-decoration: none;
  padding: 15px 34px;
  border-radius: 50px;
  font-weight: 700;
  transition: 0.3s ease;
}

.btn-dark:hover {
  transform: translateY(-4px);
}

@media (max-width: 1100px) {
  .aml-split,
  .penalty-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .aml-hero {
    padding: 80px 20px 70px;
  }

  .aml-hero h1 {
    font-size: 40px;
  }

  .aml-checklist {
    grid-template-columns: 1fr;
  }

  .cta-banner h2 {
    font-size: 34px;
  }
}

@media (max-width: 480px) {
  .aml-hero h1 {
    font-size: 32px;
  }

  .aml-hero p,
  .cta-banner p {
    font-size: 16px;
  }

  .amount {
    font-size: 32px;
  }

  .cta-banner h2 {
    font-size: 28px;
  }
}

#page-bizsetup {
  background: #f8fafc;
  color: #0f172a;
}

.biz-hero {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  padding: 100px 20px 90px;
  text-align: center;
}

.biz-hero-inner {
  max-width: 900px;
  margin: auto;
}

.biz-hero .section-tag {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.biz-hero h1 {
  font-size: 58px;
  line-height: 1.12;
  font-weight: 700;
  margin-bottom: 22px;
}

.biz-hero h1 em {
  color: #38bdf8;
  font-style: normal;
}

.biz-hero p {
  max-width: 760px;
  margin: auto;
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
}

.biz-content,
.biz-steps,
#page-bizsetup section:not(.biz-hero):not(.biz-steps):not(.cta-banner) {
  padding: 85px 20px;
  text-align: center;
}

.biz-options {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: left;
}

.biz-option {
  background: #fff;
  border-radius: 24px;
  padding: 34px 30px;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.06);
  transition: 0.3s ease;
}

.biz-option:hover {
  transform: translateY(-6px);
}

.biz-option .icon {
  font-size: 42px;
  margin-bottom: 18px;
}

.biz-option h3 {
  font-size: 28px;
  margin-bottom: 14px;
}

.biz-option p {
  color: #64748b;
  line-height: 1.8;
  font-size: 15px;
  margin-bottom: 18px;
}

.biz-option ul {
  padding-left: 18px;
  margin: 0;
}

.biz-option li {
  margin-bottom: 10px;
  color: #334155;
  line-height: 1.6;
  font-size: 15px;
}

.biz-steps {
  background: #eaf6fb;
}

.biz-steps-inner {
  max-width: 1250px;
  margin: auto;
}

.biz-step-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  margin-top: 20px;
}

.biz-step {
  background: #fff;
  border-radius: 22px;
  padding: 28px 22px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.biz-step-num {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #0ea5e9;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.biz-step h4 {
  font-size: 21px;
  margin-bottom: 10px;
}

.biz-step p {
  color: #64748b;
  line-height: 1.7;
  font-size: 15px;
}

.why-grid {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.why-card {
  background: #fff;
  border-radius: 22px;
  padding: 30px 24px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.why-icon {
  font-size: 36px;
  margin-bottom: 16px;
}

.why-card h3 {
  font-size: 22px;
  margin-bottom: 12px;
}

.why-card p {
  color: #64748b;
  line-height: 1.8;
  font-size: 15px;
}

.cta-banner {
  padding: 90px 20px;
  text-align: center;
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  color: #fff;
}

.cta-banner h2 {
  font-size: 46px;
  margin-bottom: 18px;
  font-weight: 700;
}

.cta-banner p {
  max-width: 700px;
  margin: 0 auto 28px;
  font-size: 18px;
  line-height: 1.8;
}

.btn-dark {
  display: inline-block;
  padding: 15px 34px;
  background: #0f172a;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  transition: 0.3s ease;
}

.btn-dark:hover {
  background: #020617;
  transform: translateY(-4px);
}

@media (max-width: 1200px) {
  .biz-options,
  .biz-step-list,
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .biz-hero {
    padding: 80px 20px 70px;
  }

  .biz-hero h1 {
    font-size: 40px;
  }

  .biz-options,
  .biz-step-list,
  .why-grid {
    grid-template-columns: 1fr;
  }

  .cta-banner h2 {
    font-size: 34px;
  }
}

@media (max-width: 480px) {
  .biz-hero h1 {
    font-size: 32px;
  }

  .biz-hero p,
  .cta-banner p {
    font-size: 16px;
  }

  .cta-banner h2 {
    font-size: 28px;
  }
}

.toast {
  visibility: hidden;
  min-width: 250px;
  background: #0f172a;
  color: white;
  text-align: center;
  border-radius: 8px;
  padding: 16px;
  position: fixed;
  z-index: 999;
  right: 20px;
  bottom: 30px;
  font-family: Arial;
  transition: 0.4s;
  opacity: 0;
}

.toast.show {
  visibility: visible;
  opacity: 1;
}

/* ==================================================
   WHY CHOOSE US SECTION (PREMIUM DARK LAYOUT)
================================================== */

.why-choose-us {
  background-color: #ffff;
  padding: 100px 0;
  width: 100%;
  box-sizing: border-box;
}

.container-split {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

/* --- Left Typography Panel --- */
.content-left {
  flex: 1;
  max-width: 50%;
}

.header-tag-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* The elegant gold dash indicator */
.header-tag-line::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background-color: var(--gold2, #c5a86b);
}

.tag-line {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--gold2, #c5a86b);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.title-serif {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--navy);
  font-size: 52px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 35px;
}

.description-block p {
  font-family: "Plus Jakarta Sans", sans-serif;
  /* color: #7c8893; */
  color: #656f78;
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 22px;
  font-weight: 400;
}

/* --- Right Panel 2x2 Grid System --- */
.grid-right-panel {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}

/* Grid Box Layout Base Configuration */
.panel-box {
  padding: 50px 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  box-sizing: border-box;
  background-color: var(--navy2); /* Matches your existing variables */
  transition: all 0.3s ease; /* Fixed: Correct transition syntax definition */
}

/* Internal grid dividing layout */
.grid-right-panel .panel-box:nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.grid-right-panel .panel-box:nth-child(3),
.grid-right-panel .panel-box:nth-child(4) {
  border-bottom: none;
}

/* --- New Smooth Premium Hover Effect --- */
.panel-box:hover {
  background-color: var(
    --navy3
  ); /* Smoothly transitions to your deeper navy tint */
  box-shadow: inset 2px 0 0 0 var(--gold, #edb642); /* Mimics a clean left border glow safely */
  z-index: 5; /* Brings container up slightly over global grid borders */
  cursor: pointer;
}

/* Big luxury watermarked number typography */
.panel-number {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 44px;
  font-weight: 700;
  color: #0f1822;
  margin-bottom: 24px;
  line-height: 1;
  transition: color 0.3s ease;
}

.panel-heading {
  font-family: "Playfair Display", Georgia, serif;
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 14px;
}

.panel-desc {
  font-family: "Plus Jakarta Sans", sans-serif;
  /* color: #626f7c; */
  color: #9fa5ab;
  font-size: 13.5px;
  line-height: 1.6;
}

/* --- Golden Highlight State (Card 02 Static Default View) --- */
.panel-box.active {
  background-color: rgba(255, 255, 255, 0.015);
}

.panel-box.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, #edd69a, #c5a86b);
}

.panel-box.active .panel-number,
.panel-box:hover .panel-number {
  color: #1a2531; /* Brightens up beautifully upon selection */
}

/* ================= RESPONSIVE LAYOUT ================= */
@media (max-width: 1024px) {
  .container-split {
    flex-direction: column;
    gap: 50px;
  }
  .content-left {
    max-width: 100%;
  }
  .title-serif {
    font-size: 40px;
  }
}

@media (max-width: 640px) {
  .grid-right-panel {
    grid-template-columns: 1fr;
  }
  .panel-box {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 40px 20px;
  }
  .grid-right-panel .panel-box:last-child {
    border-bottom: none !important;
  }
}

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

@media (max-width: 1200px) {
  .hero-grid,
  .about-grid {
    grid-template-columns: 1fr;
  }

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

/* New: Handles smooth optimization for Tablet screens */
@media (max-width: 992px) {
  .stats-wrap {
    gap: 16px; /* Slightly tighter gap on smaller tablet widths */
  }
  .section.dark .stat-box h3 {
    font-size: 34px; /* Scales down font metrics smoothly */
  }
}

/* New: Handles restructuring for Mobile Devices */
@media (max-width: 768px) {
  .stats-wrap {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .stat-box {
    padding: 30px 20px;
  }
}

/* ==================================================
   PREMIUM DARK SERVICES SECTION
================================================== */

.dark-services {
  background-color: #ffff; /* Deep corporate dark background */
  padding: 100px 0;
  width: 100%;
  box-sizing: border-box;
}
.dark-services .container {
  position: relative;
}

.services-header-wrap {
  display: flex;
  align-items: flex-end; /* Snaps baseline perfectly with the main h2 header line */
  justify-content: space-between;
  width: 100%;
  margin-bottom: 40px; /* Cushion layout gap space above grid system */
  gap: 24px;
}

.view-all-services-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: transparent;
  color: #031628 !important; /* Premium dark navy blue text color selection */
  border: 1px solid rgba(3, 22, 40, 0.2); /* Soft dark accent boundary ring */
  border-radius: 4px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  letter-spacing: 0.5px;
  white-space: nowrap; /* Prevents awkward string wraps */
  transition: all 0.3s ease;
}

.view-all-services-btn .btn-arrow {
  margin-left: 8px;
  font-size: 14px;
  transition: transform 0.3s ease;
}

/* Interactive Hover Feedback Logic */
.view-all-services-btn:hover {
  background: rgba(3, 22, 40, 0.04);
  border-color: #cca44c; /* Transitions to brand accent gold */
  color: #cca44c !important;
}

.view-all-services-btn:hover .btn-arrow {
  transform: translateX(
    4px
  ); /* Interactive directional slide visual feedback */
}

/* =========================================================================
   RESPONSIVE LAYOUT BREAKPOINT ADJUSTMENT (768px and below)
   ========================================================================= */
@media (max-width: 768px) {
  /* Aligns with your mobile responsive layout engine rules */
  .services-header-wrap {
    flex-direction: column;
    align-items: flex-start; /* Drops button safely below the text string to avoid overlap */
    gap: 16px;
    margin-bottom: 30px;
  }

  .view-all-services-btn {
    width: 100%; /* Stretches to a wide mobile tap target profile for ease-of-use */
    padding: 14px;
    box-sizing: border-box;
  }
}

/* Elegant Section Heading */
.title-serif-light {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--navy);
  font-size: 52px;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 50px;
  line-height: 1.2;
}

/* Capsule Pill Custom Tag Fix */
.mini-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(197, 168, 107, 0.3);
  background-color: rgba(255, 255, 255, 0.02);
  color: var(--gold2, #c5a86b);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 8px 18px;
  border-radius: 50px;
}

.mini-tag-pill .gold-dot {
  color: var(--gold, #edb642);
  font-size: 14px;
}

/* Smart Services Grid: 
   Uses auto-fit so it dynamically scales 3 columns across desktop viewports, 
   but beautifully centers remaining odd cards on lower rows.
*/
.services-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 28px;
  width: 100%;
}

/* Premium Custom Service Cards */
.service-card-premium {
  background-color: var(--navy2, #08294b); /* Deep dark navy base fill */
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

/* Subtle, luxury float up & inner-glow border shift on interaction */
.service-card-premium:hover {
  transform: translateY(-8px);
  background-color: var(--navy3, #02162d);
  border-color: rgba(197, 168, 107, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

/* Small Numerical Corner Accent Blocks */
.service-icon-box {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--gold2, #c5a86b);
  background-color: rgba(197, 168, 107, 0.1);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-bottom: 24px;
}

/* Typography elements within cards */
.service-card-premium h3 {
  font-family: "Playfair Display", Georgia, serif;
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 14px;
}

.service-card-premium p {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #a3b8cc; /* Soft contrasting grayish-blue tone */
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  font-weight: 400;
}

/* ================= FULLY RESPONSIVE BREAKPOINTS ================= */
@media (max-width: 1024px) {
  .title-serif-light {
    font-size: 40px;
  }
  .services-grid-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .dark-services {
    padding: 70px 0;
  }
  .title-serif-light {
    font-size: 34px;
    margin-bottom: 35px;
  }
  .services-grid-wrapper {
    grid-template-columns: 1fr; /* Stacks vertically into a clean line on mobile */
  }
  .service-card-premium {
    padding: 32px 24px;
  }
}

/* ==================================================
   OUR INDIA PARTNER SECTION (PREMIUM THEME)
================================================== */

.partner-section {
  background-color: var(
    --navy2
  ); /* Exact matching deep luxury dark background */
  padding: 110px 0;
  width: 100%;
  box-sizing: border-box;
}

.partner-split-container {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Vertically centers both columns perfectly */
  gap: 70px;
}

/* --- Left Typography Section --- */
.partner-content-left {
  flex: 1.1;
  max-width: 50%;
}

.partner-tag-line-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.partner-tag-line-wrap::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background-color: var(--gold, #edb642);
}

.partner-tag-text {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--gold, #edb642);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.partner-title-serif {
  font-family: "Playfair Display", Georgia, serif;
  color: #ffffff;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 30px;
  letter-spacing: -0.5px;
}

.partner-italic-gold {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--gold, #edb642);
}

.partner-description {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #626f7c; /* Muted gray text to maintain readability contrast */
  font-size: 14.5px;
  line-height: 1.8;
  margin-bottom: 35px;
  font-weight: 400;
}

/* Primary Solid Gold Button style */
.partner-btn-gold {
  display: inline-block;
  font-family: "Plus Jakarta Sans", sans-serif;
  background-color: var(--gold, #edb642);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 16px 32px;
  transition: all 0.3s ease;
}

.partner-btn-gold:hover {
  background-color: #c5a86b;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(237, 182, 66, 0.15);
}

/* --- Right Partner Information Box --- */
.partner-card-right {
  flex: 0.9;
  background-color: var(
    --navy2,
    #08294b
  ); /* Deep blue-navy container box card */
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 45px 40px;
  box-sizing: border-box;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

.partner-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 24px;
  margin-bottom: 24px;
}

.partner-name-heading {
  font-family: "Playfair Display", Georgia, serif;
  color: #ffffff;
  font-size: 28px;
  font-weight: 600;
  margin: 0;
}

/* Mini Tag inside card header */
.partner-badge {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--gold, #edb642);
  border: 1px solid rgba(237, 182, 66, 0.3);
  background: rgba(237, 182, 66, 0.04);
  padding: 6px 14px;
  letter-spacing: 1px;
  border-radius: 4px;
}

.partner-card-bio {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #a3b8cc; /* Soft greyish blue layout contrast */
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 28px;
}

/* Skill Tags Array Box wrapper */
.partner-skills-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 35px;
}

.skill-pill {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #626f7c;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12px;
  padding: 8px 16px;
  font-weight: 500;
}

/* Full Width Card Link Button */
.partner-card-link-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  background-color: var(--gold, #edb642);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 16px 24px;
  box-sizing: border-box;
  width: 100%;
  transition: all 0.3s ease;
}

.partner-card-link-button:hover {
  background-color: #ffffff;
  color: #fff;
}

.partner-arrow-diagonal {
  font-size: 15px;
  font-weight: bold;
}

/* ================= COMPREHENSIVE RESPONSIVE LAYOUT ================= */

@media (max-width: 1024px) {
  .partner-split-container {
    flex-direction: column; /* Collapses layout smoothly on tablets */
    gap: 55px;
  }
  .partner-content-left {
    max-width: 100%;
    text-align: left;
  }
  .partner-tag-line-wrap {
    justify-content: flex-start;
  }
  .partner-title-serif {
    font-size: 38px;
  }
  .partner-card-right {
    width: 100%; /* Expands info cards seamlessly to fill space edge-to-edge */
  }
}

@media (max-width: 600px) {
  .partner-section {
    padding: 70px 0;
  }
  .partner-title-serif {
    font-size: 32px;
    line-height: 1.25;
  }
  .partner-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .partner-card-right {
    padding: 30px 20px; /* Condenses heavy paddings safely on small viewport edges */
  }
  .partner-btn-gold {
    width: 100%;
    text-align: center;
  }
}

/* ==================================================
   LEADERSHIP CO-FOUNDERS SECTION (PREMIUM THEME)
================================================== */

.leadership-section {
  background-color: #fff;
  padding: 100px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Centered Tagline Layout */
.leadership-tag-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.leadership-tag-wrap::before,
.leadership-tag-wrap::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  background-color: var(--gold, #edb642);
}

.leadership-tag-text {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--gold, #edb642);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Header Title */
.leadership-main-title {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--navy);
  font-size: 52px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 60px 0;
  line-height: 1.2;
}

/* Grid Configuration */
.founders-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  width: 100%;
  align-items: stretch; /* Forces equal height cards */
}

/* Card layout using Flexbox column mapping to lock baseline elements together */
.founder-card {
  background-color: var(--navy3, #02162d);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-top: 2px solid var(--gold, #edb642);
  border-radius: 8px;
  padding: 50px 40px;
  box-sizing: border-box;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  display: flex;
  flex-direction: column;
}

.founder-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.3);
}

/* Card Header Container block */
.founder-card-top {
  text-align: center;
  flex-shrink: 0;
}

/* Avatar Frame & Image Fix */
.founder-avatar-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(237, 182, 66, 0.3);
  background-color: rgba(237, 182, 66, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px auto;
  overflow: hidden; /* Clips the image cleanly into a perfect circle */
}

.founder-avatar-circle.image-type {
  border: 2px solid rgba(237, 182, 66, 0.5); /* Enhanced border accent for images */
}

.founder-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Prevents image squishing or stretching distortion */
  display: block;
}

.founder-avatar-circle span {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--gold, #edb642);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
}

.founder-name {
  font-family: "Playfair Display", Georgia, serif;
  color: #ffffff;
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 10px 0;
}

.founder-role {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--gold, #edb642);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 20px 0;
}

.founder-divider {
  width: 40px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 0 auto 24px auto;
}

/* Dynamic content engine filler block. 
   Pushes the text block outward to align the skill tags 
   at the absolute bottom of both cards cleanly.
*/
.founder-bio-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 30px;
  text-align: left; /* Switched left text-align for longer bio paragraphs readability */
}

.founder-bio {
  font-family: "Plus Jakarta Sans", sans-serif;
  /* color: #626f7c; */
  color: #9fa5ab;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 16px 0;
  font-weight: 400;
}

.founder-bio:last-child {
  margin-bottom: 0;
}

/* Skill pills wrapper grid */
.founder-tags-flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
  margin-top: auto; /* Aligns row items directly on the container's lower edge */
}

.founder-pill {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--gold, #edb642);
  border: 1px solid rgba(237, 182, 66, 0.3);
  background-color: transparent;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.founder-pill:hover {
  background-color: rgba(237, 182, 66, 0.05);
}

/* ================= COMPREHENSIVE RESPONSIVE VIEWPORTS ================= */

@media (max-width: 1024px) {
  .leadership-main-title {
    font-size: 42px;
    margin-bottom: 45px;
  }
  .founder-card {
    padding: 40px 25px;
  }
  .founder-name {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .founders-grid {
    grid-template-columns: 1fr; /* Collapses safely into a vertical column on mobile screens */
    gap: 28px;
  }
  .leadership-main-title {
    font-size: 34px;
    margin-bottom: 35px;
  }
  .founder-card {
    padding: 40px 20px;
  }
}

/* ==================================================
   PREMIUM DARK BLOG SECTION
================================================== */

.dark-blog-section {
  background-color: var(--navy); /* Matches your core dark section background */
  padding: 100px 0;
  width: 100%;
  box-sizing: border-box;
}

.dark-blog-section .container {
  position: relative;
}

.view-all-blog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: transparent;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  letter-spacing: 0.5px;
  white-space: nowrap; /* Prevents text elements from snapping into narrow columns */
  transition: all 0.3s ease;
}

.view-all-blog-btn .btn-arrow {
  margin-left: 8px;
  font-size: 14px;
  transition: transform 0.3s ease;
}

/* Interactive Hover States */
.view-all-blog-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--gold, #cca44c);
  color: var(--gold, #cca44c) !important;
}

.view-all-blog-btn:hover .btn-arrow {
  transform: translateX(4px); /* Micro-animation push effect */
}

/* =========================================================================
   RESPONSIVE LAYOUT RESPONSIVE BREAKPOINT (640px and below)
   ========================================================================= */
@media (max-width: 640px) {
  /* On compact screen profiles, the button drops below titles gracefully */
  .blog-header-wrap {
    flex-direction: column;
    align-items: flex-start; /* Clean left-edge stacking alignment */
    gap: 16px;
    margin-bottom: 35px;
  }

  .view-all-blog-btn {
    width: 100%; /* Stretches seamlessly to create an expansive tap surface area on mobile phones */
    padding: 14px;
    box-sizing: border-box;
  }
}

.blog-header-wrap {
  display: flex;
  align-items: flex-end; /* Keeps button sitting cleanly on the text baseline */
  justify-content: space-between;
  width: 100%;
  margin-bottom: 40px; /* Spacing cushion above your grid cards layout */
  gap: 24px;
}

.blog-main-title {
  font-family: "Playfair Display", Georgia, serif;
  color: #ffffff;
  font-size: 52px;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 55px;
  line-height: 1.2;
}

/* Responsive Blog Grid Layout */
.blog-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: 100%;
}

/* Premium Blog Card Structure */
.blog-post-card {
  background-color: var(
    --navy3,
    #02162d
  ); /* Matches your deep navy internal cards */
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  overflow: hidden; /* Clips image corners cleanly to match the border radius */
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.blog-post-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
}

/* Image Thumbnail Container */
.blog-image-wrapper {
  position: relative;
  width: 100%;
  height: 230px;
  overflow: hidden;
  background-color: #08294b;
}

.blog-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-post-card:hover .blog-image-wrapper img {
  transform: scale(1.06); /* Smooth premium image zoom when card is hovered */
}

/* Overlay Category Badge */
.blog-category-tag {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: var(--gold, #edb642);
  color: #03080e;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border-radius: 4px;
}

/* Content Area inside Card */
.blog-card-content {
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Pushes the 'Read More' link uniformly to the baseline */
}

.blog-meta-data {
  margin-bottom: 12px;
}

.blog-date {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #626f7c; /* Muted corporate grey text */
  font-size: 13px;
  font-weight: 500;
}

/* Post Typography links */
.blog-card-content h3 {
  margin: 0 0 14px 0;
  line-height: 1.3;
}

.blog-title-link {
  font-family: "Playfair Display", Georgia, serif;
  color: #ffffff;
  font-size: 23px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-title-link:hover {
  color: var(--gold, #edb642); /* Turns title gold on interactive hover */
}

.blog-card-content p {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #a3b8cc; /* Soft greyish blue text for enhanced description contrast */
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 24px 0;
}

/* Modern Link Button at Bottom */
.blog-read-more-btn {
  margin-top: auto; /* Aligns precisely on the lower margin border */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--gold, #edb642);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: gap 0.2s ease;
}

.blog-read-more-btn .arrow {
  transition: transform 0.2s ease;
}

.blog-read-more-btn:hover .arrow {
  transform: translateX(4px); /* Interactive nudge forward arrow movement */
}

/* ================= COMPREHENSIVE RESPONSIVE VIEWPORTS ================= */

@media (max-width: 1024px) {
  .blog-main-title {
    font-size: 42px;
    margin-bottom: 40px;
  }
  .blog-grid-container {
    grid-template-columns: repeat(
      2,
      1fr
    ); /* Drops beautifully to a 2-column layout on tablets */
    gap: 24px;
  }
  .blog-title-link {
    font-size: 21px;
  }
}

@media (max-width: 768px) {
  .blog-grid-container {
    grid-template-columns: 1fr; /* Formats into a clean vertical single column stack on mobile mobile formats */
    gap: 28px;
  }
  .blog-main-title {
    font-size: 34px;
    margin-bottom: 35px;
  }
  .blog-image-wrapper {
    height: 200px; /* Slims image container space slightly on phone displays */
  }
  .blog-card-content {
    padding: 24px 20px;
  }
}

/* ==================================================
   UPDATED CENTERED ABOUT HERO SECTION
================================================== */

.about-hero-centered {
  position: relative;
  /* Retains your dark blue overlay background styling principles */
  background: linear-gradient(rgba(0, 31, 63, 0.82), rgba(0, 31, 63, 0.88)),
    url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1600&q=80")
      no-repeat center center / cover;
  padding: 180px 0 120px 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center; /* Forces clean horizontal centering layout */
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.hero-center-content {
  max-width: 850px; /* Limits paragraph width line break thresholds precisely */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Centered Tagline Accent Bar Component Lines */
.about-hero-tag-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.about-hero-tag-wrap::before,
.about-hero-tag-wrap::after {
  content: "";
  display: inline-block;
  width: 35px;
  height: 1px;
  background-color: var(--gold, #edb642);
}

.about-hero-tag-text {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--gold, #edb642);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Premium Main Title Header */
.about-hero-title {
  font-family: "Playfair Display", Georgia, serif;
  color: #ffffff;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 28px 0;
  letter-spacing: -0.5px;
}

.about-italic-gold {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--gold, #edb642);
}

/* Subtext Meta Paragraph Block Styling Rules */
.about-hero-lead {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #a3b8cc; /* Soft greyish blue layout contrast ratio */
  font-size: 16px;
  line-height: 1.7;
  max-width: 680px;
  margin: 0 0 40px 0;
  font-weight: 400;
}

.about-hero-actions {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ================= COMPREHENSIVE VIEWPORT RESPONSIVENESS ================= */

@media (max-width: 1024px) {
  .about-hero-centered {
    padding: 150px 0 100px 0;
  }
  .about-hero-title {
    font-size: 52px;
  }
}

@media (max-width: 768px) {
  .about-hero-centered {
    padding: 130px 20px 80px 20px;
  }
  .about-hero-title {
    font-size: 40px;
    line-height: 1.25;
  }
  .about-hero-lead {
    font-size: 14.5px;
    margin-bottom: 30px;
  }
  .about-hero-tag-wrap::before,
  .about-hero-tag-wrap::after {
    width: 20px; /* Shortens border vector lines slightly on mobile displays */
  }
}

/* ==================================================
   PREMIUM TEXT-BASED EDITORIAL BLOG SECTION
================================================== */

.dark-blog-editorial {
  background-color: #03080e; /* Matches your core dark background */
  padding: 110px 0;
  width: 100%;
  box-sizing: border-box;
}

.blog-main-title {
  font-family: "Playfair Display", Georgia, serif;
  color: #ffffff;
  font-size: 52px;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 60px;
  line-height: 1.2;
}

/* 3-Column Grid for Desktop */
.blog-editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
}

/* Entire card acts as a clean, responsive link wrapper */
.editorial-card {
  text-decoration: none;
  background-color: var(--navy3, #02162d); /* Matches your deep navy cards */
  border-top: 3px solid rgba(255, 255, 255, 0.05); /* Premium horizontal boundary divider line */
  padding: 40px 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover State: Turns top border line gold and darkens card background seamlessly */
.editorial-card:hover {
  background-color: #051d38;
  border-top-color: var(--gold, #edb642);
  transform: translateY(-4px);
}

/* Header Metadata Meta Row */
.editorial-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  width: 100%;
}

.editorial-category {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(
    --gold,
    #edb642
  ); /* Uses bright gold for category text highlights */
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.editorial-date {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #626f7c; /* Subtle grey for publication dates */
  font-size: 13px;
  font-weight: 500;
}

/* Body Content Styling */
.editorial-card-body h3 {
  font-family: "Playfair Display", Georgia, serif;
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Custom interactive arrow that tracks rightward upon card interaction */
.editorial-arrow {
  color: #626f7c;
  font-size: 22px;
  font-weight: 300;
  transition: transform 0.3s ease, color 0.3s ease;
  padding-left: 10px;
}

.editorial-card:hover .editorial-arrow {
  color: var(--gold, #edb642);
  transform: translateX(6px);
}

.editorial-card-body p {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #a3b8cc; /* Soft contrast grayish blue description text */
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  font-weight: 400;
}

/* ================= COMPREHENSIVE RESPONSIVE BREAKPOINTS ================= */

@media (max-width: 1024px) {
  .blog-main-title {
    font-size: 42px;
    margin-bottom: 45px;
  }
  .blog-editorial-grid {
    grid-template-columns: repeat(
      2,
      1fr
    ); /* Responsive switch to 2 columns on tablets */
    gap: 24px;
  }
  .editorial-card {
    padding: 35px 24px;
  }
}

@media (max-width: 768px) {
  .blog-editorial-grid {
    grid-template-columns: 1fr; /* Clean single file column array display on phone viewports */
    gap: 20px;
  }
  .blog-main-title {
    font-size: 34px;
    margin-bottom: 35px;
  }
  .editorial-card {
    padding: 32px 20px;
  }
}

/* ==================================================
   HERITAGE SECTION (ONE LEGACY. TWO NATIONS.)
================================================== */

.heritage-section {
  background-color: #fff; /* Warm premium off-white/light ivory canvas background */
  padding: 100px 0 0 0; /* Bottom padding handled cleanly by the dark baseline strip */
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Header Text Container Blocks */
.heritage-header-block {
  max-width: 800px;
  margin-bottom: 60px;
}

.heritage-mini-tag {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--gold, #edb642);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 16px;
}

.heritage-main-title {
  font-family: "Playfair Display", Georgia, serif;
  color: #03080e; /* Deep dark contrast text */
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px 0;
}

.heritage-main-title .gold-italic {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--gold, #edb642);
}

.heritage-subtitle {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #5c6770; /* Elegant soft slate-grey reads better on warm ivory backgrounds */
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

/* Dual Column Layout Grid configuration */
.heritage-dual-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  border-top: 1px solid rgba(3, 8, 14, 0.06); /* Upper subtle separator boundary */
}

/* Base structural column properties */
.heritage-col {
  position: relative; /* Context parent anchor zone block for background watermarks */
  padding: 60px 50px 80px 50px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Left to right interior line dividing card boundaries */
.heritage-col.border-right {
  border-right: 1px solid rgba(3, 8, 14, 0.08);
}

/* Absolute Watermark Typography Placement Styles */
.watermark-bg {
  position: absolute;
  bottom: 40px;
  right: 40px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 140px;
  font-weight: 700;
  line-height: 1;
  color: rgba(
    3,
    8,
    14,
    0.02
  ); /* Extremely faint premium watermark visual trace layout */
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* Column Content Typography Elements */
.col-meta-tag {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #a3906b; /* Muted corporate light gold contrast text tone */
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  margin-bottom: 24px;
}

.col-company-title {
  font-family: "Playfair Display", Georgia, serif;
  color: #03080e;
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 6px 0;
}

.col-location-sub {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--gold, #edb642);
  font-size: 13px;
  font-weight: 500;
  display: block;
  margin-bottom: 30px;
}

.col-body-text {
  position: relative;
  z-index: 2; /* Ensures content overlays safely directly above watermark stamps */
}

.col-body-text p {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #4a545e;
  font-size: 14.5px;
  line-height: 1.75;
  margin: 0 0 20px 0;
}

.col-body-text p:last-child {
  margin-bottom: 0;
}

/* Inline Text Navigation Anchor Links */
.heritage-inline-link {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--gold, #edb642);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  margin-top: 35px;
  display: inline-block;
  align-self: flex-start;
  border-bottom: 1px solid rgba(237, 182, 66, 0.4);
  padding-bottom: 4px;
  transition: all 0.25s ease;
}

.heritage-inline-link:hover {
  color: #03080e;
  border-bottom-color: #03080e;
}

/* ================= BOTTOM DARK STRIP ACCENT LAYER ================= */

.heritage-dark-strip {
  background-color: #03080e; /* Deep solid rich structural dark navy color block */
  padding: 30px 0;
  width: 100%;
  box-sizing: border-box;
}

.strip-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.strip-line {
  flex-grow: 1;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.08);
}

.strip-quote-text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
  margin: 0;
  white-space: nowrap;
  text-align: center;
}

/* ================= RESPONSIVE VIEWPORT BREAKPOINTS ================= */

@media (max-width: 1024px) {
  .heritage-main-title {
    font-size: 40px;
  }
  .heritage-col {
    padding: 45px 35px 65px 35px;
  }
  .watermark-bg {
    font-size: 110px;
    bottom: 25px;
    right: 25px;
  }
}

@media (max-width: 768px) {
  .heritage-section {
    padding-top: 70px;
  }
  .heritage-header-block {
    margin-bottom: 40px;
  }
  .heritage-main-title {
    font-size: 34px;
  }

  /* Collapses the grid safely into stacked single vertical layouts on mobile devices */
  .heritage-dual-grid {
    grid-template-columns: 1fr;
  }

  .heritage-col {
    padding: 40px 20px 50px 20px;
  }

  .heritage-col.border-right {
    border-right: none;
    border-bottom: 1px solid rgba(3, 8, 14, 0.08); /* Re-orients line divider horizontaly */
  }

  .watermark-bg {
    font-size: 90px;
    bottom: 20px;
    right: 20px;
  }

  .strip-line {
    display: none; /* Drops vectors to keep mobile viewport calculations centered safely */
  }
  .strip-quote-text {
    font-size: 14px;
    white-space: normal;
    line-height: 1.4;
  }
}

/* ==================================================
   VISION & MISSION SYSTEM PREMIUM DARK STYLES
================================================== */

.vision-mission-section {
  background-color: var(
    --navy
  ); /* Core rich dark executive background theme tint */
  padding: 120px 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Header Elements Typography */
.v-m-header-wrap {
  text-align: center;
  margin-bottom: 70px;
  width: 100%;
}

.v-m-mini-tag {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--gold, #edb642);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}

.v-m-main-title {
  font-family: "Playfair Display", Georgia, serif;
  color: #ffffff;
  font-size: 52px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.v-m-main-title .gold-ampersand {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold, #edb642);
}

/* Side-by-Side Dual Matrix Grid Setup */
.v-m-grid-system {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.04); /* Subdued external bounding box line */
}

/* Card Column Block Wrappers */
.v-m-card {
  position: relative; /* Context standard base coordinate tracking for back watermarks */
  padding: 70px 60px;
  box-sizing: border-box;
  background-color: transparent;
  display: flex;
  flex-direction: column;
}

/* Internal Center Split Divider Line */
.v-m-card.border-divider {
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}

/* Large Low-Contrast Backdrop Serif Tokens */
.v-m-watermark {
  position: absolute;
  bottom: -20px;
  right: 20px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 220px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.015); /* Faint visual waterstamp asset style */
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* Text Content Structuring Rules */
.v-m-accent-line {
  width: 35px;
  height: 2px;
  background-color: var(--gold, #edb642);
  margin-bottom: 24px;
}

.v-m-block-title {
  font-family: "Playfair Display", Georgia, serif;
  color: #ffffff;
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 28px 0;
}

.v-m-body-paragraphs {
  position: relative;
  z-index: 2; /* Forces copy to safely layer explicitly over the top of backgrounds */
}

.v-m-body-paragraphs p {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #8fa0b0; /* Clean medium-contrast readable text alignment */
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 20px 0;
  font-weight: 400;
}

.v-m-body-paragraphs p:last-child {
  margin-bottom: 0;
}

/* Premium Contrast Emphasis Class for Initial Statements */
.v-m-body-paragraphs p.highlight-text {
  color: #e1e7ec; /* Higher text color tier for key summaries */
  font-size: 15.5px;
}

/* ================= COMPREHENSIVE RE-FLOW RESPONSIVENESS ================= */

@media (max-width: 1024px) {
  .v-m-main-title {
    font-size: 42px;
  }
  .v-m-card {
    padding: 55px 40px;
  }
  .v-m-watermark {
    font-size: 170px;
  }
}

@media (max-width: 768px) {
  .vision-mission-section {
    padding: 80px 0;
  }
  .v-m-header-wrap {
    margin-bottom: 45px;
  }
  .v-m-main-title {
    font-size: 34px;
  }

  /* Collapses side-by-side matrices into clean stacked presentation modules on mobile screens */
  .v-m-grid-system {
    grid-template-columns: 1fr;
    border: none; /* Strip box outlines to rely on natural padding space elements */
  }

  .v-m-card {
    padding: 40px 20px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 20px;
  }

  .v-m-card.border-divider {
    border-right: 1px solid rgba(255, 255, 255, 0.04); /* Equalized border blocks uniform stack arrays */
  }

  .v-m-card:last-child {
    margin-bottom: 0;
  }

  .v-m-watermark {
    font-size: 130px;
    bottom: -10px;
    right: 10px;
  }
}

/* ==================================================
   CORE VALUES MODULE LIGHT IVORY STYLES
================================================== */

.values-section {
  background-color: #fff; /* Matches the warm ivory/bone light background canvas */
  padding: 120px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Header Alignment Wrap */
.values-header-wrap {
  text-align: left;
  margin-bottom: 60px;
  width: 100%;
}

.values-mini-tag {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--gold, #edb642);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}

.values-main-title {
  font-family: "Playfair Display", Georgia, serif;
  color: #03080e; /* High contrast structural dark header text */
  font-size: 48px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.values-main-title .gold-italic {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--gold, #edb642);
}

/* The fluid 3-Column Card Matrix Grid system layout */
.values-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px; /* Precise gap separation between individual content blocks */
  width: 100%;
}

/* Individual Card Blocks Structural Assembly */
.value-card {
  background-color: var(
    --navy2
  ); /* Crisp stark clean white inner layout card box */
  padding: 50px 40px 45px 40px;
  box-sizing: border-box;
  border: 1px solid rgba(3, 8, 14, 0.04); /* Subdued perimeter boundary line */
  box-shadow: 0 4px 20px rgba(3, 8, 14, 0.015); /* Soft professional shadow depth */
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
  transform: translateY(-4px); /* Clean elegant elevate interaction accent */
  box-shadow: 0 12px 30px rgba(3, 8, 14, 0.04);
}

/* Special Active Featured First-Card Top Gold Line Border Highlight */
.value-card.active-accent {
  border-top: 3px solid var(--gold, #edb642);
}

/* Low-Contrast Backdrop Numerical Tracking Tokens */
.value-card-num {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 42px;
  font-weight: 500;
  font-style: italic;
  /* color: rgba(
    237,
    182,
    66,
    0.25
  ); Faint elegant gold numeric reference line stamp */
  color: #ffff;
  line-height: 1;
  display: block;
  margin-bottom: 24px;
}

.value-card-title {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--gold);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 16px 0;
  letter-spacing: -0.2px;
}

.value-card-body {
  font-family: "Plus Jakarta Sans", sans-serif;
  /* color: #5c6770;  */
  color: #9fa5ab;
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0;
  font-weight: 400;
}

/* ================= COMPREHENSIVE VIEWPORT RESPONSIVENESS ================= */

@media (max-width: 1100px) {
  /* Re-maps grid layout system automatically into a balanced 2-Column row array on standard tablets */
  .values-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .values-main-title {
    font-size: 42px;
  }
}

@media (max-width: 768px) {
  .values-section {
    padding: 80px 0;
  }
  .values-header-wrap {
    margin-bottom: 40px;
  }
  .values-main-title {
    font-size: 34px;
  }

  /* Flattens the array safely down to a clean singular stack layout framework on phones */
  .values-cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .value-card {
    padding: 40px 30px;
  }

  .value-card-num {
    font-size: 36px;
    margin-bottom: 18px;
  }

  .value-card-title {
    font-size: 20px;
    margin-bottom: 12px;
  }
}

/* ==================================================
   OUR APPROACH MODULE STYLES
================================================== */

.approach-section {
  background-color: var(--navy); /* Matches the warm luxury ivory canvas base */
  padding: 120px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Master Split Layout Matrix Grid */
.approach-split-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* Left content takes up slightly more room */
  gap: 80px;
  align-items: start;
  width: 100%;
}

/* Header Content Elements Formatting */
.approach-header-wrap {
  margin-bottom: 45px;
}

.approach-mini-tag {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--gold, #edb642);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}

.approach-main-title {
  font-family: "Playfair Display", Georgia, serif;
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 24px 0;
  line-height: 1.2;
}

.approach-main-title .gold-italic {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--gold, #edb642);
}

.approach-lead-text {
  font-family: "Plus Jakarta Sans", sans-serif;
  /* color: #5c6770; */
  color: #9fa5ab;
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0;
  max-width: 580px;
}

/* Process Array Elements List Styling */
.approach-steps-list {
  display: flex;
  flex-direction: column;
}

.approach-step-item {
  display: flex;
  align-items: flex-start;
  padding: 35px 0;
  border-top: 1px solid rgba(3, 8, 14, 0.08); /* Clean dividers between rows */
}

.approach-step-item:last-child {
  padding-bottom: 0;
}

/* Left-positioned Numeric Token Alignment */
.approach-step-num {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  font-style: italic;
  color: var(--gold, #edb642);
  line-height: 1;
  min-width: 50px;
  margin-top: 2px;
}

.approach-step-title {
  font-family: "Playfair Display", Georgia, serif;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px 0;
}

.approach-step-body {
  font-family: "Plus Jakarta Sans", sans-serif;
  /* color: #5c6770; */
  color: #9fa5ab;
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0;
}

/* Right-Column Dark Contrast Card Construction */
.approach-sticky-card {
  background-color: var(
    --navy2
  ); /* High-contrast core corporate dark card fill */
  border-left: 3px solid var(--gold, #edb642); /* Signature gold accent strip edge */
  padding: 50px 45px;
  box-sizing: border-box;
  position: sticky; /* Card drops smoothly alongside list details as user reads */
  top: 40px;
}

.approach-quote {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.4;
  color: #ffffff;
  margin: 0 0 30px 0;
}

.approach-card-body p {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #8fa0b0; /* Accessible low contrast slate tone */
  font-size: 14.5px;
  line-height: 1.75;
  margin: 0 0 20px 0;
}

.approach-card-body p:last-child {
  margin-bottom: 0;
}

/* ================= COMPREHENSIVE VIEWPORT RESPONSIVENESS ================= */

@media (max-width: 1100px) {
  .approach-split-layout {
    gap: 40px;
  }
  .approach-sticky-card {
    padding: 40px 30px;
  }
  .approach-main-title {
    font-size: 42px;
  }
  .approach-quote {
    font-size: 22px;
  }
}

@media (max-width: 900px) {
  /* Converts side-by-side splits into a single top-to-bottom reading sequence for medium/small viewports */
  .approach-split-layout {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .approach-sticky-card {
    position: static; /* Disables fixed scroll binding logic on smaller viewports */
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .approach-section {
    padding: 80px 0;
  }
  .approach-main-title {
    font-size: 34px;
  }
  .approach-lead-text {
    font-size: 14.5px;
  }
  .approach-step-item {
    flex-direction: column; /* Stack details vertically beneath numbers on narrow phones */
    padding: 25px 0;
  }
  .approach-step-num {
    margin-bottom: 10px;
  }
}

/* ==================================================
   FINAL CALL-TO-ACTION (CTA) SECTION STYLES
================================================== */

.ready-cta-section {
  background-color: #fff; /* Deep core premium corporate dark canvas background */
  padding: 100px 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center; /* Ensures perfect fluid center alignment for all nested content */
  position: relative;
  overflow: hidden;
}

.ready-cta-content {
  max-width: 800px; /* Restricts layout width for superior typographic line lengths */
  margin: 0 auto;
  padding: 0 20px;
}

.ready-cta-title {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--navy); /* High contrast bright title typography text line */
  font-size: 44px;
  font-weight: 600;
  margin: 0 0 20px 0;
  line-height: 1.25;
  letter-spacing: -0.3px;
}

.ready-cta-title .gold-italic {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(
    --gold,
    #edb642
  ); /* Signature branding asset color focus highlight */
}

.ready-cta-text {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #a3b3c2; /* Soft muted legible text tone */
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 40px 0;
  font-weight: 400;
}

/* Singular Button Component Wrapping Engine Block */
.ready-action-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Premium Primary Solid Gold Action Button Element Link styling */
.btn-explore-services {
  display: inline-block;
  background-color: var(
    --gold,
    #c1922e
  ); /* Rich golden solid base tone color map */
  color: #ffffff; /* Crisp stark white text color readability mask */
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 18px 42px;
  text-decoration: none;
  border-radius: 0; /* Keeps signature sharp corporate border-box aesthetics */
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 15px rgba(193, 146, 46, 0.15);
}

/* Elegant Action Interaction Hover Transitions */
.btn-explore-services:hover {
  background-color: #a67c22; /* Gently darkened gold shade state shift */
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(193, 146, 46, 0.25);
}

.btn-explore-services:active {
  transform: translateY(0);
}

/* ================= COMPREHENSIVE VIEWPORT RESPONSIVENESS ================= */

@media (max-width: 768px) {
  .ready-cta-section {
    padding: 80px 0;
  }

  .ready-cta-title {
    font-size: 32px;
    line-height: 1.3;
  }

  .ready-cta-text {
    font-size: 14.5px;
    margin-bottom: 30px;
  }

  /* Expands button slightly to provide comfortable tap space targets on mobile screens */
  .btn-explore-services {
    width: 100%;
    max-width: 320px; /* Clean look on narrow layout formats */
    padding: 16px 30px;
    font-size: 12.5px;
    box-sizing: border-box;
  }
}

/* ==================================================
   UPDATED CENTERED SERVICES HERO SECTION
================================================== */

.services-hero-centered {
  position: relative;
  /* Deep navy gradient blend overlaid safely on top of your background skyline asset */
  background: linear-gradient(rgba(0, 31, 63, 0.82), rgba(0, 31, 63, 0.88)),
    url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1800&q=80")
      no-repeat center center / cover;
  padding: 180px 0 110px 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center; /* Forces clean text horizontal centering natively */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.services-hero-inner {
  max-width: 850px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Tagline Container and Decorative Gold Lines */
.services-hero-tag-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.services-hero-tag-wrap::before,
.services-hero-tag-wrap::after {
  content: "";
  display: inline-block;
  width: 35px;
  height: 1px;
  background-color: var(--gold, #edb642);
}

.services-hero-tag-text {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--gold, #edb642);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Main Display Typography */
.services-hero-title {
  font-family: "Playfair Display", Georgia, serif;
  color: #ffffff;
  font-size: 60px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 24px 0;
  letter-spacing: -0.5px;
}

.services-hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
}

.services-italic-gold {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: #fff;
}

/* Content Explanatory Paragraph */
.services-hero-lead {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #a3b8cc; /* Soft muted metallic blue readability gray tint */
  font-size: 16px;
  line-height: 1.75;
  max-width: 650px;
  margin: 0;
  font-weight: 400;
}

/* ================= COMPREHENSIVE VIEWPORT RESPONSIVENESS ================= */

@media (max-width: 1024px) {
  .services-hero-centered {
    padding: 150px 0 90px 0;
  }
  .services-hero-title {
    font-size: 48px;
  }
}

@media (max-width: 768px) {
  .services-hero-centered {
    padding: 130px 20px 80px 20px;
  }
  .services-hero-title {
    font-size: 36px;
    line-height: 1.3;
  }
  .services-hero-lead {
    font-size: 14.5px;
  }
  .services-hero-tag-wrap::before,
  .services-hero-tag-wrap::after {
    width: 20px; /* Shortens border rules slightly on tight mobile screen sizes */
  }
}

/* Container styling */
.services-matrix-section {
  background-color: var(
    --navy
  ); /* Dark navy background matching the screenshot */
  padding: 60px 20px;
  font-family: "Inter", sans-serif; /* Clean sans-serif font */
}

.matrix-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px; /* Space between different service blocks */
}

/* Individual Block Box */
.matrix-block {
  background-color: var(--navy2); /* Lighter navy blue for the card */
  border: 1px solid #233554;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Upper Section: Header Info */
.matrix-col-left {
  padding: 30px 40px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* Temporary icon replacement to match screenshot */
.matrix-icon-placeholder {
  background: #233554;
  border: 1px solid #3b4f73;
  border-radius: 8px;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a8b2d1;
  font-size: 20px;
  flex-shrink: 0;
}

.matrix-heading {
  color: #ffffff;
  font-family: "Playfair Display", serif; /* Serif font for headings */
  font-size: 24px;
  margin: 0 0 10px 0;
  font-weight: 500;
}

.matrix-description {
  color: #7f92b3;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  max-width: 600px;
}

/* Lower Section: 5-Column Grid Matrix */
.matrix-col-right {
  border-top: 1px solid #233554; /* Separates header from the list matrix */
}

.matrix-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 Equal Columns */
}

.matrix-list li {
  color: #8892b0;
  font-size: 13px;
  padding: 25px 20px;
  border-right: 1px solid #233554;
  border-bottom: 1px solid #233554;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
  min-height: 70px;
}

/* Remove unnecessary border on the 5th item of every row */
.matrix-list li:nth-child(5n) {
  border-right: none;
}

/* Bullet Point Styling matching the screenshots */
.matrix-list li::before {
  content: "•";
  color: #c5a880; /* Light gold accent color */
  font-size: 16px;
}

/* Empty grid filler item styling */
.matrix-list li.empty-slot::before {
  content: none;
}

/* Responsive fix for smaller viewports */
@media (max-width: 1024px) {
  .matrix-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .matrix-list li:nth-child(5n) {
    border-right: 1px solid #233554;
  }
  .matrix-list li:nth-child(2n) {
    border-right: none;
  }
}

@media (max-width: 600px) {
  .matrix-list {
    grid-template-columns: 1fr;
  }
  .matrix-list li {
    border-right: none !important;
  }
}

/* Industries Hero Section Main Frame */
.industries-hero {
  background-color: #0d2e6b; /* Exact deep royal blue background matching the reference */
  padding: 100px 20px 90px 20px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

/* Central Alignment Shell */
.industries-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Small Upper Tracking Label */
.sectors-tag {
  color: var(--gold); /* Warm gold accent tone */
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 24px;
  display: inline-block;
}

/* Primary Page Heading Structure */
.hero-heading {
  color: #ffffff;
  font-family: "Cormorant Garamond", serif;
  font-size: 54px; /* Perfectly scaled to look prominent and elegant */
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 24px 0;
  letter-spacing: -0.5px;
}

/* Gold Script-Italic Typography Accent */
.highlight-italic {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--gold); /* Matches tag color precisely */
  font-weight: 500;
}

/* Multi-Line Informative Paragraph Style */
.hero-subtext {
  color: #a4b7d3; /* Soft blueprint blue-gray tone for optimal readability */
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  max-width: 680px;
  margin: 0 auto;
  font-weight: 400;
}

/* --- Responsive Adjustments --- */

@media (max-width: 768px) {
  .industries-hero {
    padding: 80px 20px 70px 20px;
  }

  .hero-heading {
    font-size: 38px;
    margin-bottom: 18px;
  }

  .hero-subtext {
    font-size: 14px;
    max-width: 550px;
  }
}

@media (max-width: 480px) {
  .industries-hero {
    padding: 60px 16px 50px 16px;
  }

  .sectors-tag {
    font-size: 11px;
    margin-bottom: 16px;
  }

  .hero-heading {
    font-size: 30px;
  }
}

/* Section Base Canvas Wrapper */
.industries-grid-section {
  background-color: #f4f7fc; /* Provides contrast for the deep navy cards */
  padding: 80px 20px;
  text-align: center;
}

.section-tag {
  color: var(--gold);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.section-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 42px;
  color: #0d2e6b;
  margin: 0 0 50px 0;
  font-weight: 500;
}

.section-title em {
  font-style: italic;
  font-weight: 500;
}

/* Three-Column Responsive Cards Grid Container */
.industries-cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Premium Card Main Block */
.ind-card {
  background-color: var(
    --ny--navy
  ); /* Solid Deep Blue Container from Screenshot */
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  box-shadow: 0 10px 30px rgba(11, 37, 84, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ind-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(11, 37, 84, 0.15);
}

/* Card Image Header Box */
.ind-card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.ind-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Retains perspective ratios during window resizing */
}

/* Inner Copy/Content Area */
.ind-card-content {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ind-card-content h3 {
  font-family: "Cormorant Garamond", serif;
  color: var(--navy);
  font-size: 21px;
  font-weight: 500;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ind-icon {
  font-size: 18px;
}

.ind-card-content p {
  font-family: "Inter", sans-serif;
  /* color: #9cb1d6;  */
  color: #5c87d1;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 24px 0;
  flex-grow: 1; /* Pushes tags container to line up horizontally */
}

/* Badges Flex Grid Wrapper Layout */
.ind-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

/* Refined Outline Chip Badges */
.ind-tag-chip {
  font-family: "Inter", sans-serif;
  color: var(--gold); /* Warm gold text */
  font-size: 11px;
  font-weight: 500;
  padding: 6px 12px;
  border: 1px solid rgba(204, 164, 76, 0.3); /* Subtle clear gold outline border */
  border-radius: 4px;
  background-color: rgba(204, 164, 76, 0.04);
}

/* --- Responsive Media Viewport Breaks --- */

@media (max-width: 1024px) {
  .industries-cards {
    grid-template-columns: repeat(2, 1fr); /* 2 Columns on Tablets */
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .section-title {
    font-size: 32px;
    margin-bottom: 35px;
  }
}

@media (max-width: 650px) {
  .industries-cards {
    grid-template-columns: 1fr; /* Single column layout on smart phones */
  }

  .ind-card-image {
    height: 180px;
  }
}

/* Blog Page Hero Background Canvas */
.blog-hero {
  background: linear-gradient(rgba(0, 31, 63, 0.84), rgba(0, 31, 63, 0.9)),
    url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1800&q=80");
  padding: 200px 20px 80px 20px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;

  align-items: center;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Central Real Estate Alignment Shell */
.blog-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Mini Tracking Label Upper Metadata Tag */
.blog-hero .sectors-tag {
  color: var(--gold); /* Golden contrast accent */
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 24px;
  display: inline-block;
}

/* Premium Typography Heading Layout */
.blog-hero .hero-heading {
  color: #ffffff;
  font-family: "Cormorant Garamond", serif;
  font-size: 54px;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 24px 0;
  letter-spacing: -0.5px;
}

/* Script Style Accent */
.blog-hero .highlight-italic {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--gold);
}

/* Paragraph copy blocks descriptive metrics */
.blog-hero .hero-subtext {
  color: #a4b7d3; /* Soft blue-grey mix optimized for screen readability */
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  max-width: 660px;
  margin: 0 auto 40px auto;
  font-weight: 400;
}

/* Filter Buttons Outer Flexible Base Track */
.hero-filter-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  max-width: 800px;
}

/* Capsule Form Filter Element Styling */
.blog-tag-btn {
  background: transparent;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 24px;
  border: 1px solid rgba(255, 255, 255, 0.25); /* Muted borders match screen context */
  border-radius: 30px; /* Perfect rounded capsule style */
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

/* Hover Interactivity Response */
.blog-tag-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background-color: rgba(204, 164, 76, 0.05);
}

/* Selected/Active Filter Button Core Highlights */
.blog-tag-btn.active {
  background-color: var(--gold) !important; /* Solid gold filler */
  color: #0d2e6b !important; /* Dark text overlay matches canvas theme color */
  border-color: var(--gold) !important;
  font-weight: 600;
}

/* Content Area Base Spacing adjustments */
.blog-content {
  padding: 60px 20px;
  /* background-color: #f8fafc; */
}

/* --- Responsive Media Scale Viewports --- */

@media (max-width: 768px) {
  .blog-hero {
    padding: 150px 20px 60px 20px;
  }

  .blog-hero .hero-heading {
    font-size: 38px;
  }

  .blog-hero .hero-subtext {
    font-size: 14px;
    margin-bottom: 30px;
  }

  .blog-tag-btn {
    padding: 8px 18px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .blog-hero {
    padding: 170px 16px 50px 16px;
  }

  .blog-hero .hero-heading {
    font-size: 28px;
    line-height: 1.2;
  }

  .hero-filter-container {
    gap: 8px;
  }
}

/* Featured Section External Canvas Box Wrapper */
.featured-article-section {
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Featured Card Root Layout Structure */
.featured-card {
  background-color: var(
    --navy
  ); /* Matching your uniform deep royal blue brand canvas */
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  min-height: 440px;
  box-shadow: 0 12px 40px rgba(13, 46, 107, 0.12);
}

/* Left Half: Responsive Visual Container */
.featured-image-box {
  flex: 1;
  width: 50%;
  position: relative;
  min-height: 100%;
}

.featured-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right Half: Precise Layout Copy Field */
.featured-content-box {
  flex: 1;
  width: 50%;
  padding: 48px 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

/* Top Mini Metadata Bar Row */
.featured-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

/* Golden Mustard Structural Capsule Badge */
.featured-badge {
  background-color: var(--gold);
  color: #0d2e6b;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 12px;
  border-radius: 4px;
}

.featured-date {
  color: #7994c1;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
}

/* Main Post Title Typography Styling */
.featured-title {
  color: #ffffff;
  font-family: "Cormorant Garamond", serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 16px 0;
  letter-spacing: -0.2px;
}

/* Article Body Excerpt Copy */
.featured-excerpt {
  color: #a4b7d3;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 32px 0;
  font-weight: 400;
}

/* Profile Metadata Footer Container */
.featured-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto; /* Guarantees footer sticks neat at the bottom margin edge */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
}

/* Author Profiler Layout Group */
.author-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Rounded Profile Monogram Initials Icon */
.author-avatar {
  width: 40px;
  height: 40px;
  background-color: var(--gold);
  color: #0d2e6b;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-name {
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.author-meta {
  color: #7994c1;
  font-family: "Inter", sans-serif;
  font-size: 12px;
}

/* Interactive Text Link Actions */
.read-article-link {
  color: var(--gold);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}

.read-article-link:hover {
  color: #dbae53;
}

.link-arrow {
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.read-article-link:hover .link-arrow {
  transform: translateX(4px);
}

/* --- Media Queries for Seamless Responsiveness --- */

/* Medium Layout Screens (Tablets / Small Notebooks) */
@media (max-width: 992px) {
  .featured-content-box {
    padding: 36px 40px;
  }

  .featured-title {
    font-size: 26px;
  }
}

/* Compact Mobile Screens Layout Transformations */
@media (max-width: 768px) {
  .featured-card {
    flex-direction: column; /* Convert standard horizontal desktop split to uniform grid stack vertical */
    min-height: auto;
  }

  .featured-image-box {
    width: 100%;
    height: 260px; /* Locked fixed portrait field box on mobile viewports */
  }

  .featured-content-box {
    width: 100%;
    padding: 32px 24px;
  }

  .featured-title {
    font-size: 24px;
    line-height: 1.3;
  }

  .featured-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .read-article-link {
    width: 100%;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: rgba(204, 164, 76, 0.06);
    border-radius: 6px;
    box-sizing: border-box;
  }
}

/* Blog Card Grid Grid Layout Matrix */
.blog-grid {
  max-width: 1200px;
  margin: 40px auto 80px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Individual Premium Blog Card Base Frame */
.blog-card {
  background-color: var(
    --navy
  ); /* Solid premium dark blue matching screenshot exactly */
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(11, 37, 84, 0.06);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(11, 37, 84, 0.15);
}

/* Responsive Image Display Block */
.blog-card-image {
  width: 100%;
  height: 210px;
  overflow: hidden;
  position: relative;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Typography Copy & Metadata Padding Shell */
.blog-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Metadata Category & Timeline Row */
.blog-card-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* Mini Tag Pill Badges Framework */
.blog-card-badge {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 4px;
}

/* Category Color Palettes Matching Reference Screen Styles */
.badge-accounting {
  background-color: rgba(45, 136, 121, 0.15);
  color: #49c4b0; /* Mint Teal */
}

.badge-vat {
  background-color: rgba(204, 164, 76, 0.15);
  color: var(--gold); /* Accent Gold */
}

.badge-tax {
  background-color: rgba(59, 130, 246, 0.15);
  color: #60a5fa; /* Light Blue */
}

.badge-aml {
  background-color: rgba(139, 92, 246, 0.15);
  color: #a78bfa; /* Violet */
}

.badge-setup {
  background-color: rgba(234, 88, 12, 0.15);
  color: #fb923c; /* Warm Orange */
}

/* Date Accent Typography */
.blog-card-date {
  font-family: "Inter", sans-serif;
  color: #7994c1;
  font-size: 13px;
  font-weight: 400;
}

/* Primary Article Headline Title Style */
.blog-card-body h3 {
  font-family: "Cormorant Garamond", serif;
  color: #ffffff;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 12px 0;
  letter-spacing: -0.1px;
}

/* Article Abstract Snippet Style */
.blog-card-body p {
  font-family: "Inter", sans-serif;
  color: #9cb1d6;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 24px 0;
  flex-grow: 1; /* Guarantees card footers automatically align neatly at the base margin */
}

/* Footer Section Grid Divider line */
.blog-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 16px;
  margin-top: auto;
}

.blog-author {
  font-family: "Inter", sans-serif;
  color: #7994c1;
  font-size: 13px;
  font-weight: 500;
}

/* Interactive Text Links Styling */
.blog-read-link {
  font-family: "Inter", sans-serif;
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}

.blog-read-link:hover {
  color: #dbae53;
}

.read-arrow {
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.blog-read-link:hover .read-arrow {
  transform: translateX(3px);
}

/* --- Media Queries for Flawless Responsiveness --- */

@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(
      2,
      1fr
    ); /* 2 Column configuration for Tablet layouts */
    gap: 24px;
  }
}

@media (max-width: 680px) {
  .blog-grid {
    grid-template-columns: 1fr; /* Full-width single column cards stack for Smart Phones */
    padding: 0 16px;
    margin-bottom: 50px;
  }

  .blog-card-image {
    height: 190px;
  }
}

/* Newsletter External Block Container */
.blog-newsletter-container {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Master Inner Canvas Box Frame Styling */
.newsletter-inner-wrap {
  background-color: var(
    --navy
  ); /* Solid corporate deep blue matching screenshot precisely */
  border-radius: 16px;
  padding: 40px 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  box-shadow: 0 10px 30px rgba(13, 46, 107, 0.08);
}

/* Left Typography Column Alignment */
.newsletter-text-side {
  flex: 1;
  text-align: left;
}

.newsletter-text-side h3 {
  font-family: "Cormorant Garamond", serif;
  color: #ffffff;
  font-size: 30px;
  font-weight: 500;
  margin: 0 0 8px 0;
  letter-spacing: -0.2px;
}

.newsletter-text-side p {
  font-family: "Inter", sans-serif;
  color: #a4b7d3; /* Soft blue-grey mix optimized for readability */
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
}

/* Right Content Inline Form Layout Component */
.newsletter-form-side {
  display: flex;
  align-items: center;
}

.newsletter-inline-form {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Deep Muted Blue Form Input Frame Styling */
.newsletter-input-field {
  width: 280px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0 18px;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.newsletter-input-field:focus {
  border-color: var(--gold);
  background-color: rgba(255, 255, 255, 0.07);
}

/* Premium Gold Action Button Layout Styling */
.newsletter-submit-btn {
  height: 48px;
  background-color: var(--gold); /* Gold brand fill */
  color: #0d2e6b; /* Dark navy text matching reference screen */
  border: none;
  border-radius: 6px;
  padding: 0 28px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  white-space: nowrap;
}

.newsletter-submit-btn:hover {
  background-color: var(--gold2);
}

.newsletter-submit-btn:active {
  transform: scale(0.98);
}

/* --- Responsive Media Scale Viewport Breaking points --- */

/* Medium Screen Layout (Small Laptops / Tablets) */
@media (max-width: 992px) {
  .newsletter-inner-wrap {
    padding: 36px;
    gap: 30px;
  }

  .newsletter-text-side h3 {
    font-size: 26px;
  }

  .newsletter-input-field {
    width: 220px;
  }
}

/* Compact Mobile Screen Vertical Layout Transformations */
@media (max-width: 768px) {
  .newsletter-inner-wrap {
    flex-direction: column; /* Transforms wide layout into a vertical container grid stack */
    align-items: stretch;
    text-align: center;
    padding: 32px 24px;
  }

  .newsletter-text-side {
    text-align: center;
  }

  .newsletter-text-side h3 {
    font-size: 24px;
  }

  .newsletter-form-side,
  .newsletter-inline-form {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .newsletter-input-field {
    width: 100%;
    text-align: center; /* Centers placeholder text elements for look symmetry on mobile devices */
  }

  .newsletter-submit-btn {
    width: 100%;
    justify-content: center;
  }
}

/* External Canvas Layout Box Margin Spacing */
.finance-cta-section {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Master Premium Card Flex Shell Base */
.finance-cta-card {
  background-color: var(
    --navy
  ); /* Solid premium deep brand blue matching screenshot exactly */
  border-radius: 16px;
  padding: 56px 40px;
  text-align: center;
  box-shadow: 0 12px 35px rgba(11, 37, 84, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Central Block Content Core Matrix */
.finance-cta-content {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Headline Hero Core Typography */
.finance-cta-title {
  color: #ffffff;
  font-family: "Cormorant Garamond", serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 14px 0;
  letter-spacing: -0.2px;
}

/* Descriptive Abstract Callout Metrics */
.finance-cta-subtext {
  color: #a4b7d3; /* Soft blue-grey mix optimized for premium contrast */
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 28px 0;
  font-weight: 400;
}

/* Interactive Action Buttons Structural Box Wrapper */
.finance-cta-action-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Solid Brand Gold Filled Button Element Component */
.finance-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background-color: #cca44c; /* Gold brand fill matching visual mockups */
  color: #0d2e6b; /* Solid dark text contrast matching reference layout image */
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  padding: 0 36px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(204, 164, 76, 0.15);
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.1s ease;
  white-space: nowrap;
}

.finance-cta-button:hover {
  background-color: #dbae53;
}

.finance-cta-button:active {
  transform: scale(0.98);
}

/* --- Responsive Media Viewport Breaks Framework --- */

/* Medium Layout Screens (Tablets / Notebook Frameworks) */
@media (max-width: 768px) {
  .finance-cta-card {
    padding: 44px 28px;
    margin: 0 8px;
  }

  .finance-cta-title {
    font-size: 28px;
    line-height: 1.3;
  }

  .finance-cta-subtext {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .finance-cta-button {
    padding: 0 28px;
    font-size: 14px;
    height: 46px;
  }
}

/* Ultra-Compact Smartphone Displays Viewport Scale Layout */
@media (max-width: 480px) {
  .finance-cta-card {
    padding: 36px 20px;
    border-radius: 12px;
  }

  .finance-cta-title {
    font-size: 24px;
  }

  .finance-cta-button {
    width: 100%; /* Spans full horizontal scale for thumb accessibility targets */
    box-sizing: border-box;
  }
}

/* ================= GLOBAL DESKTOP HEADER LAYOUT ================= */
.header {
  position: fixed;
  top: 40px;
  left: 0;
  width: 100% !important; /* Forces layout tracking across devices */
  z-index: 2000;
  background: rgba(0, 31, 63, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

/* Flex Container Wrapper - Corrected for authentic 100% edge-to-edge layout tracking */
.nav-container {
  width: 100% !important; /* Overrides any narrow default layout limits */
  max-width: 100% !important; /* Breaks the block out of centered constraints */
  height: 85px;
  margin: 0; /* Eliminates the centered auto-margin block behavior */
  padding: 0 40px; /* Generates professional breathing space on far ends */
  display: flex;
  align-items: center;
  justify-content: space-between; /* Securely pins Logo to far left and Action button to far right */
  position: relative;
  box-sizing: border-box;
}

/* Branding Alignment Group */
.logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  z-index: 2100;
}

.logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.logo-text h3 {
  /* color: #ffffff; */
  color: var(--gold);
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

.logo-text p {
  color: #cca44c;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin: 2px 0 0 0;
}

/* Desktop Inline Link Strip Layout Elements */
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-item {
  color: #a4b7d3;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s ease;
  position: relative;
}

.nav-item:hover,
.nav-item.active {
  color: #cca44c;
}

/* Action Utility Component Box */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 2100;
}

/* Navigation Utilities Display States */
.mobile-only {
  display: none !important;
}

/* Hamburger UI Toggle Structural Button Blueprint */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger-bar {
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

/* ================= MOBILE VIEWPORTS RESPONSIVE BREAKPOINT ================= */
@media (max-width: 768px) {
  .header {
    top: 50px;
  }
  .nav-container {
    height: 70px; /* Snug height framework optimized for smaller device rows */
    padding: 0 20px;
  }

  .logo-img {
    height: 38px; /* Clean size drop preventing overflow wrapping */
  }

  .logo-text h3 {
    font-size: 17px;
    color: var(--gold);
  }

  /* Visibility Display Value Shifts */
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: inline-flex !important;
  }

  /* Activate Hamburger Trigger Display */
  .menu-toggle {
    display: flex;
  }

  /* Structural Slide-Down Drawer Overrides */
  .nav-links {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #001f3f; /* Deep brand uniform dark blue fill */
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    gap: 0;
    box-sizing: border-box;
    border-bottom: 3px solid #cca44c;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

    /* Animation Hidden Initial Parameters */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  }

  /* Open State Multiplier */
  .nav-links.mobile-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Navigation Link Rows Padding inside Mobile Context Drawer */
  .nav-item {
    padding: 14px 0;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 15px;
  }

  .nav-links .glow-button.mobile-only {
    margin-top: 20px;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Hamburger to Morph 'X' Transition */
  .menu-toggle.active .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background-color: #cca44c;
  }

  .menu-toggle.active .hamburger-bar:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background-color: #cca44c;
  }

  /* Safe Offset for Top Hero Section Text Canvas Core */
  .hero,
  .blog-hero {
    padding-top: 140px !important;
  }
}

/* ================= DESKTOP BASE CONFIGURATIONS ================= */
.top-banner {
  background-color: #111111;
  color: #888888;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 40px;
  box-sizing: border-box;
  width: 100%;
  position: fixed; /* Kept fixed to top of viewport */
  top: 0;
  left: 0;
  z-index: 2002;
}

.banner-left,
.banner-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.separator {
  color: #666666;
  margin: 0 4px;
}

.vertical-pipe {
  color: #444444;
  margin: 0 15px;
  font-weight: 300;
}

.top-banner a {
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.top-banner a:hover {
  opacity: 0.8;
}

.email,
.phone,
.partner-name {
  color: var(--gold);
  font-weight: 600;
}

.country-code {
  font-weight: bold;
  margin-right: 4px;
  font-size: 9px;
}

.partner-text {
  color: var(--gold);
}

.header {
  position: fixed;
  top: 40px; /* Sits flush beneath the single-line desktop top-banner */
  left: 0;
  width: 100% !important;
  z-index: 2000;
  background: rgba(0, 31, 63, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  transition: top 0.2s ease; /* Smooth layout shift adjustment */
}

.nav-container {
  max-width: 1200px;
  height: 85px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  box-sizing: border-box;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  z-index: 2100;
}

.logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.logo-text h3 {
  color: var(--gold);
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

.logo-text p {
  color: var(--gold);
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin: 2px 0 0 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-item {
  color: #a4b7d3;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s ease;
  position: relative;
}

.nav-item:hover,
.nav-item.active {
  color: var(--gold);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 2100;
}

.mobile-only {
  display: none !important;
}

.desktop-only {
  display: inline-flex !important;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger-bar {
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

/* ================= 2. TABLET RESPONSIVE BREAKPOINT (780px down to 481px) ================= */
/* =========================================================================
   CLEAN RESPONSIVE LAYOUT (FOR ALL TABLETS & PHONES LESS THAN 780px)
   ========================================================================= */
@media (max-width: 780px) {
  /* 1. Turn off fixed positions so elements stack naturally in the document flow */
  .top-banner {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 16px !important;
    text-align: center !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* 2. Let the main header sit naturally directly underneath the top banner */
  .header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    background: #001f3f !important; /* solid deep dark blue fill background */
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: -1px;
  }

  /* 3. Handle data elements cleanly on mobile viewports */
  .banner-left,
  .banner-right {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .vertical-pipe,
  .separator {
    display: none !important; /* Hides horizontal bars that cause clipping bugs */
  }

  .email,
  .phone,
  .partner-text {
    word-break: break-all !important; /* Prevents text from extending past the viewport edge */
    text-align: center !important;
    font-size: 11px !important;
  }

  .nav-container {
    height: 70px !important;
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .logo-img {
    height: 36px !important; /* Scaled slightly down to save row real estate */
    width: auto !important;
  }

  .logo-text h3 {
    font-size: 16px !important;
    margin: 0 !important;
  }

  .logo-text p {
    font-size: 8.5px !important;
    margin: 2px 0 0 0 !important;
  }

  /* 4. Dropdown Drawer Overlay Navigation Framework */
  .nav-links {
    position: absolute !important;
    top: 70px !important; /* Sits precisely below the 70px height nav-container */
    left: 0 !important;
    width: 100% !important;
    background: #001f3f !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 20px !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    border-bottom: 3px solid var(--gold) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) !important;
    z-index: 2500 !important;

    /* Animation Initial Values */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  }

  .nav-links.mobile-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  .nav-item {
    padding: 12px 0 !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-size: 14px !important;
    display: block !important;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: inline-flex !important;
  }

  .menu-toggle {
    display: flex !important;
  }

  .nav-links .glow-button.mobile-only {
    margin-top: 16px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* Hamburger Interaction Micro-Animations */
  .menu-toggle.active .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
    background-color: var(--gold) !important;
  }

  .menu-toggle.active .hamburger-bar:nth-child(2) {
    opacity: 0 !important;
  }

  .menu-toggle.active .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
    background-color: var(--gold) !important;
  }

  /* 5. REMOVE ABSOLUTE PADDING GAP: Elements drop naturally into place */
  .hero,
  .blog-hero {
    padding-top: 40px !important; /* Low padding value since header is no longer floating */
  }
}

/* =========================================================================
   ULTRA-COMPACT CELLPHONES MODIFIER (FOR SCREENS LESS THAN 480px)
   ========================================================================= */
@media (max-width: 480px) {
  .top-banner {
    padding: 12px 10px !important; /* Tighter padding metrics for small displays */
  }
  .header {
    margin-bottom: -1px;
  }

  .nav-container {
    height: 60px !important; /* Compact navbar framework */
  }

  .logo-img {
    height: 30px !important;
  }

  .logo-text h3 {
    font-size: 14px !important;
    letter-spacing: -0.2px !important;
  }

  .nav-links {
    top: 60px !important; /* Adjusted to remain flush with the smaller header container height */
  }

  /* Scales down large hero text headers so they look clean on mobile */
  .hero h1 {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }

  .hero p {
    font-size: 14px !important;
  }
}

/* =========================================================================
   PREMIUM STATS RIBBON ROW
   ========================================================================= */
.stats-section {
  background-color: var(--navy);
  padding: 40px 0 !important; /* Elegant vertical padding metrics */
  width: 100% !important;
  box-sizing: border-box;
  overflow: hidden;
}

.stats-container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.stat-item {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 10px 20px;
  box-sizing: border-box;
}

/* Elegant vertical divider lines between columns */
.stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 55px; /* Height of the vertical line */
  background: rgba(
    255,
    255,
    255,
    0.25
  ); /* Subtle, semi-transparent white divider line */
}

/* Big Bold Numbers styling */
.stat-item h3 {
  color: #ffffff !important;
  font-family: "Cormorant Garamond", serif; /* Elegant serif look matching your brand logo typography */
  font-size: 42px;
  font-weight: 700;
  margin: 0 0 4px 0;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

/* Description Text Labels styling */
.stat-item p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase; /* Clean uppercase letter style */
  letter-spacing: 0.8px;
  margin: 0;
  line-height: 1.3;
}

/* =========================================================================
   RESPONSIVE LAYOUT BREAKPOINTS (MOBILE & TABLET OPTIMIZATION)
   ========================================================================= */

/* For Small Laptops and Tablets (Turns into a neat 2x2 grid) */
@media (max-width: 991px) {
  .stats-row {
    flex-wrap: wrap; /* Allows items to wrap onto a second line */
  }

  .stat-item {
    flex: calc(50% - 20px); /* Sets up a clean 2-column layout structure */
    margin-bottom: 24px;
    padding: 10px;
  }

  /* Clear old desktop divider layout lines for tablet viewports */
  .stat-item::after {
    display: none !important;
  }

  /* Add temporary tablet borders to separate left and right items */
  .stat-item:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* Remove bottom margin on the last row items */
  .stat-item:nth-last-child(-n + 2) {
    margin-bottom: 0;
  }
}

/* For Compact Phone Screens (Vertical Stack Layout Area) */
@media (max-width: 520px) {
  .stats-section {
    padding: 30px 0 !important;
  }

  .stat-item {
    flex: 100% !important; /* Stacks columns directly on top of each other */
    border-right: none !important; /* Clears row border layouts */
    margin-bottom: 24px;
    padding: 8px 0;
  }

  .stat-item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Adds a subtle horizontal separator between items on mobile */
    padding-bottom: 20px;
  }

  .stat-item:last-child {
    margin-bottom: 0;
  }

  .stat-item h3 {
    font-size: 36px; /* Slightly downscaled size to keep elements clean on phones */
  }

  .stat-item p {
    font-size: 10.5px;
    letter-spacing: 0.5px;
  }
}

.service-card-premium-link {
  text-decoration: none !important;
  color: inherit !important;
  display: block;
  transition: transform 0.3s ease;
}

.service-card-premium-link:hover {
  transform: translateY(-5px); /* Clean subtle lift effect on card hover */
}

/* Ensure the parent block is the point of origin */
.matrix-block {
  position: relative;
}

/* Invisible custom scroll element positioning */
.scroll-anchor {
  position: absolute;
  top: -160px; /* Forces the scroll target up past your fixed top header banner */
  left: 0;
  width: 1px;
  height: 1px;
  visibility: hidden;
  pointer-events: none;
}

/* HTML smooth scroll rule */
html {
  scroll-behavior: smooth;
}

/* Mobile viewport navigation height scaling adjustments */
@media (max-width: 991px) {
  .scroll-anchor {
    top: -240px; /* Extra offset breathing room for stacked navigation cards on tablet sizes */
  }
}

@media (max-width: 768px) {
  .scroll-anchor {
    top: -40px; /* Clean alignment check for mobile mobile views */
  }
}

.industries-section .container {
  position: relative;
}
.industries-section .container .section-header-wrap .mini-tag {
  max-width: 200px;
}
/* =========================================================================
   BULLETPROOF RESPONSIVE GRID & CARDS FIX
   ========================================================================= */

/* 1. Global Box Sizing Check (Crucial for mobile) */
.industries-section,
.industries-section * {
  box-sizing: border-box; /* Prevents paddings from pushing cards out of screen bounds */
}

/* 2. Main Grid Base Setup */
.grid.four {
  display: grid;
  gap: 24px;
  width: 100%;
  margin-top: 45px;
  grid-template-columns: repeat(4, 1fr); /* 4 columns on Desktop */
}

/* 3. Base Card Tweaks */
.card {
  width: 100%; /* Force cards to use grid sizing instead of fixed widths */
  background: #fff;
  padding: 32px;
  border-radius: var(--radius, 12px);
  box-sizing: border-box;
}

/* =========================================================================
   MEDIA QUERIES FOR RESPONSIVE TABLET & MOBILE VIEWS
   ========================================================================= */

/* Tablet View (Screens smaller than 1024px) */
@media (max-width: 1024px) {
  .grid.four {
    grid-template-columns: repeat(2, 1fr); /* Clean 2-column layout grid */
    gap: 20px;
  }
}

/* Mobile View (Screens smaller than 768px) */
@media (max-width: 768px) {
  .grid.four {
    grid-template-columns: 1fr; /* 1 Column full-width vertical stack */
    gap: 16px; /* Slightly tighter gap for mobile layouts */
    margin-top: 30px;
  }

  .card {
    padding: 24px; /* Lower padding inside card so text doesn't look crowded */
  }

  .card h3 {
    font-size: 22px; /* Scales down massive headings for compact viewports */
    margin-bottom: 8px;
  }

  .card p {
    font-size: 14px;
    line-height: 1.6;
  }
}
/* Flexbox wrapper that aligns text to the left and button to the right */
/* =========================================================================
   FIXED RESPONSIVE INDUSTRIES HEADER
   ========================================================================= */
.section-header-wrap {
  display: flex;
  align-items: flex-end; /* Clean bottom text baseline matching alignment */
  justify-content: space-between;
  width: 100%;
  margin-bottom: 40px;
  gap: 30px; /* Secure horizontal breathing space gap metrics */
  box-sizing: border-box;
}

.header-text-block {
  display: flex;
  flex-direction: column;
  flex: 1; /* Allows the text block to naturally occupy available space */
  min-width: 0; /* Critical CSS fix to prevent long flex text strings from overflowing */
}

/* Ensure title handles small viewports beautifully */
.section-header-wrap h2.title.white {
  font-size: clamp(
    24px,
    4vw,
    36px
  ); /* Fluid typography scaling based on device size */
  margin-top: 8px;
  line-height: 1.2;
}

/* Custom Outlined Action Button Styling */
.know-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: transparent;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  letter-spacing: 0.5px;
  white-space: nowrap; /* Prevents text splitting across multiple lines inside button wrapper */
  transition: all 0.3s ease;
}

.know-more-btn .btn-arrow {
  margin-left: 8px;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.know-more-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #cca44c;
  color: #cca44c !important;
}

.know-more-btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* =========================================================================
   BULLETPROOF MOBILE MEDIA QUERIES (FIXES YOUR OVERLAP PROBLEM)
   ========================================================================= */
@media (max-width: 768px) {
  .section-header-wrap {
    flex-direction: column; /* Switches from side-by-side to stacked view */
    align-items: flex-start; /* Instantly aligns both elements to the left edge */
    gap: 16px; /* Reduced layout spacing cushion */
    margin-bottom: 30px;
  }

  .know-more-btn {
    align-self: flex-start; /* Keeps the button cleanly sized to its text instead of filling the screen */
    padding: 10px 20px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  /* For small phone screens, stretch the button to be an easy tap target */
  .know-more-btn {
    width: 100%;
    box-sizing: border-box;
    align-self: stretch;
  }
}

/* =========================================================================
   PREMIUM REDESIGNED SERVICES PAGES
   ========================================================================= */
.premium-services-section {
  padding: 100px 0;
  background-color: #031628; /* Matches your premium dark background palette */
  color: #ffffff;
  font-family: "Plus Jakarta Sans", sans-serif;
  overflow: hidden;
}

.services-layout-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 120px; /* Generous vertical breathing room between your main blocks */
}

/* Base structural layout for each service block */
.modern-service-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
}

/* Alternating rows pattern engine */
.modern-service-row.reverse-row {
  flex-direction: row-reverse;
}

/* Embedded Page Target Offset Scroll Anchor Fix */
.modern-service-row .scroll-anchor {
  position: absolute;
  top: -160px; /* Perfect offset height alignment cushion beneath fixed header navigation */
  left: 0;
  visibility: hidden;
}

/* Media/Image Containers Side */
.service-media-side {
  flex: 1;
  min-width: 0;
}

.service-display-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: block;
}

/* Text Content Blocks Side */
.service-text-side {
  flex: 1;
  min-width: 0;
}

.service-heading-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.service-num-badge {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  color: #cca44c; /* Accent brand gold color */
  font-weight: 600;
  border-bottom: 1px solid rgba(204, 164, 76, 0.4);
  padding-bottom: 2px;
}

.service-row-title {
  font-family: "Playfair Display", serif;
  font-size: 36px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.service-row-desc {
  font-size: 16px;
  line-height: 1.7;
  color: #a0aec0; /* Balanced readability tone text */
  margin-bottom: 32px;
}

/* Clean Capabilities System (Removes old spreadsheet table styles) */
.sub-services-wrapper {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
}

.capabilities-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #cca44c;
  margin-bottom: 16px;
  font-weight: 700;
}

.capability-tags-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(
    2,
    1fr
  ); /* Split items into a clean dual column stack text list */
  gap: 12px 24px;
}

.capability-tags-list li {
  font-size: 14px;
  color: #e2e8f0;
  position: relative;
  padding-left: 16px;
  line-height: 1.4;
}

/* Elegant micro check indicator dot */
.capability-tags-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #cca44c;
  font-size: 16px;
}

/* =========================================================================
   ROBUST RESPONSIVE ENGINE FOR REDESIGNED MATRIX
   ========================================================================= */
@media (max-width: 991px) {
  .services-layout-container {
    gap: 80px;
  }

  .modern-service-row,
  .modern-service-row.reverse-row {
    flex-direction: column; /* Collapses into stacked blocks on tablet views */
    gap: 32px;
  }

  .service-display-img {
    height: 320px; /* Slightly lower crop bounds for medium screens */
  }

  .service-row-title {
    font-size: 28px;
  }
}

@media (max-width: 576px) {
  .premium-services-section {
    padding: 60px 0;
  }

  .capability-tags-list {
    grid-template-columns: 1fr; /* 1 column simple stacked view on small phones */
    gap: 10px;
  }

  .service-display-img {
    height: 220px;
  }
}

/* =========================================================================
   PREMIUM HERO CINEMATIC ENTRANCE SYSTEM
   ========================================================================= */

/* Base hidden state configuration for elements awaiting animation entry */
.animate-fade-up {
  opacity: 0;
  transform: translateY(30px); /* Starts 30px lower down the screen */
  animation-name: heroFadeInUp;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(
    0.25,
    1,
    0.5,
    1
  ); /* Elegant, custom decelerating curve */
  animation-fill-mode: forwards; /* Ensures elements stay visible after animating */
  will-change: transform, opacity; /* Optimizes mobile performance render tracks */
}

/* Precise Staggered Delay Engine */
.style-delay-1 {
  animation-delay: 0.2s; /* Pill tag reveals almost instantly */
}

.style-delay-2 {
  animation-delay: 0.45s; /* Heading moves upward smoothly next */
}

.style-delay-3 {
  animation-delay: 0.75s; /* Buttons slide up gracefully at the end */
}

/* Micro-interaction updates for Button Hovers */
.btn-main,
.btn-outline {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s ease,
    border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Subtle physical lifting reaction when users hover over buttons */
.btn-main:hover,
.btn-outline:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* =========================================================================
   ANIMATION KEYFRAME FORMULAS
   ========================================================================= */
@keyframes heroFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Snaps perfectly to native layout destination */
  }
}

/* Optional: Subtle panning background scale effect for the hero section background image */
.hero {
  position: relative;
  overflow: hidden;
  animation: heroBackgroundZoom 12s ease-out infinite alternate;
  background-size: 100% auto;
}

@keyframes heroBackgroundZoom {
  0% {
    background-scale: 1;
    background-position: center center;
  }
  100% {
    background-size: 106% auto; /* Generates a living breathing premium parallax ambient move */
  }
}

/* =========================================================================
   PREMIER SPLIT-LAYOUT ENTRANCE ANIMATIONS
   ========================================================================= */

/* Base container protection to avoid animation overflow clipping issues */
.why-choose-us {
  overflow: hidden;
}

/* Left Side: Smooth Slide-In from Left */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px); /* Starts slightly to the left */
  animation: smoothRevealLeft 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  will-change: transform, opacity;
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px); /* Starts slightly to the right */
  animation: smoothRevealRight 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  will-change: transform, opacity;
}

/* =========================================================================
   ANIMATION KEYFRAME FOR RIGHT SLIDE
   ========================================================================= */
@keyframes smoothRevealRight {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(
      0
    ); /* Snaps accurately to native layout destination */
  }
}

/* Right Side Panels: Smooth Cascade Upwards */
.reveal-up {
  opacity: 0;
  transform: translateY(35px); /* Starts slightly lower down */
  animation: smoothRevealUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  will-change: transform, opacity;
}

/* Precise Staggered Cascading Delays for the Right Side Grid Panels */
.panel-delay-1 {
  animation-delay: 0.2s;
}
.panel-delay-2 {
  animation-delay: 0.35s;
}
.panel-delay-3 {
  animation-delay: 0.5s;
}
.panel-delay-4 {
  animation-delay: 0.65s;
}
.panel-delay-5 {
  animation-delay: 1s;
}

/* Micro-interaction Hover Effects for individual Panel Boxes */
.panel-box {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease,
    border-color 0.4s ease !important;
}

.panel-box:hover {
  transform: translateY(-5px); /* Elegant interactive lift effect */
  border-color: #cca44c; /* Accent Gold highlighting */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* =========================================================================
   ANIMATION KEYFRAME MODULES
   ========================================================================= */
@keyframes smoothRevealLeft {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(
      0
    ); /* Snaps accurately to native layout destination */
  }
}

@keyframes smoothRevealUp {
  0% {
    opacity: 0;
    transform: translateY(35px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================================
   RESPONSIVE DESIGN SYSTEM OVERRIDES (MOBILE OPTIMIZATION)
   ========================================================================= */
@media (max-width: 768px) {
  /* On compact screen profiles, turn off the side horizontal slide to prevent right-edge clipping */
  .reveal-left {
    transform: translateY(30px);
    animation: smoothRevealUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }

  .reveal-right {
    transform: translateY(30px);
    animation: smoothRevealUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }

  /* Speeds up cascade sequence on mobile screens for a faster scroll feel */
  .panel-delay-1 {
    animation-delay: 0.1s;
  }
  .panel-delay-2 {
    animation-delay: 0.2s;
  }
  .panel-delay-3 {
    animation-delay: 0.3s;
  }
  .panel-delay-4 {
    animation-delay: 0.4s;
  }
}

.footer-social {
  margin-top: 24px;
}

.footer-social h5 {
  color: var(--gold);
  font-size: 15px;
  margin-bottom: 14px;
  font-weight: 600;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-icons a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);

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

  color: #fff;
  font-size: 18px;
  transition: all 0.3s ease;
}

.social-icons a:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-3px);
}

/* ==================================================
   PREMIUM LEGAL PAGE
================================================== */

/* HERO */

.legal-hero {
  position: relative;
  padding: 230px 0 140px;
  text-align: center;
  overflow: hidden;

  background: linear-gradient(rgba(0, 31, 63, 0.92), rgba(2, 22, 45, 0.95)),
    url("./pics/homeBg.png");

  background-size: cover;
  background-position: center;
}

.legal-hero::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;

  top: -150px;
  right: -150px;

  background: radial-gradient(
    circle,
    rgba(237, 182, 66, 0.12),
    transparent 70%
  );

  pointer-events: none;
}

.legal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 22px;

  border: 1px solid rgba(237, 182, 66, 0.25);
  background: rgba(255, 255, 255, 0.04);

  color: var(--gold);

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;

  margin-bottom: 30px;
}

.legal-hero h1 {
  color: #fff;
  font-size: clamp(52px, 6vw, 84px);
  margin-bottom: 20px;
}

.legal-hero p {
  max-width: 720px;
  margin: auto;

  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  line-height: 1.9;
}

.last-updated {
  margin-top: 35px;

  display: inline-block;

  color: var(--gold);
  font-size: 14px;
  font-weight: 600;

  border-bottom: 1px solid rgba(237, 182, 66, 0.3);
  padding-bottom: 8px;
}

/* SECTION */

.policy-section {
  position: relative;
  padding: 110px 0;
  background: #f8f9fc;
}

/* CONTAINER */

.policy-container {
  max-width: 950px;
}

/* INDIVIDUAL CARDS */

.policy-block {
  background: #fff;

  padding: 45px;
  margin-bottom: 28px;

  border-radius: 22px;

  box-shadow: 0 10px 35px rgba(0, 31, 63, 0.05);

  transition: all 0.35s ease;

  border: 1px solid rgba(0, 31, 63, 0.05);

  position: relative;
}

.policy-block:hover {
  transform: translateY(-5px);

  box-shadow: 0 20px 50px rgba(0, 31, 63, 0.1);
}

/* GOLD ACCENT */

.policy-block::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 5px;
  height: 100%;

  background: linear-gradient(to bottom, var(--gold), rgba(237, 182, 66, 0.2));

  border-radius: 30px 0 0 30px;
}

/* HEADINGS */

.policy-block h2 {
  font-size: 34px;
  color: var(--navy);

  margin-bottom: 20px;
  line-height: 1.2;
}

.policy-block h3 {
  font-size: 24px;
  margin-top: 25px;
  margin-bottom: 12px;

  color: var(--navy2);
}

/* TEXT */

.policy-block p {
  color: var(--text);

  font-size: 16px;
  line-height: 2;
}

/* LISTS */

.policy-block ul {
  margin-top: 18px;
  padding-left: 0;
}

.policy-block li {
  list-style: none;

  position: relative;

  padding-left: 28px;
  margin-bottom: 12px;

  color: var(--text);
  line-height: 1.9;
}

.policy-block li::before {
  content: "✓";

  position: absolute;
  left: 0;
  top: 0;

  color: var(--gold);
  font-weight: bold;
}

/* CONTACT CARD */

.policy-block:last-child {
  background: linear-gradient(135deg, #ffffff, #faf8f2);
}

.policy-block strong {
  color: var(--navy);
}

/* LINKS */

.policy-block a {
  color: var(--gold2);
  font-weight: 600;
}

.policy-block a:hover {
  color: var(--gold);
}

.section-number {
  display: block;
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 3px;
  margin-bottom: 10px;
  font-weight: 700;
}

/* MOBILE */

@media (max-width: 768px) {
  .legal-hero {
    padding: 180px 20px 100px;
  }

  .policy-section {
    padding: 70px 0;
  }

  .policy-block {
    padding: 30px;
  }

  .policy-block h2 {
    font-size: 28px;
  }

  .legal-hero p {
    font-size: 16px;
  }
}