/* --- Black buttons with red hover --- */
.btn-primary,
.btn-accent,
.btn-secondary {
  background-color: #000000;        /* Black default */
  border: 1px solid #111;           /* Subtle border */
  color: white;
  transition: background-color 0.25s ease, 
              border-color 0.25s ease,
              transform 0.2s ease;
  position: relative;
  overflow: hidden;
}

/* Hover state = deep premium red */
.btn-primary:hover,
.btn-accent:hover,
.btn-secondary:hover,
.btn-white:hover {
  background-color: #8b0000;        /* Dark, elegant crimson */
  border-color: #a30000;            /* Slightly brighter border */
  transform: translateY(-2px);      /* Subtle lift */
}

/* Active click */
.btn-primary:active,
.btn-accent:active,
.btn-secondary:active {
  transform: translateY(1px);
}

.btn-uppercase {
    text-transform: uppercase !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.btn-no-arrow::before {
  display: none !important;
}

.btn,
.btn * {
  text-transform: none !important;
}

    /* Base badge styling */
  .badge-red,
  .badge-red-v2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 9999px;
    line-height: 1;
    width: fit-content;
    white-space: nowrap;
  }

  /* Light red background — like badge-green but red */
  .badge-red {
    background-color: #fee2e2; /* light red */
    color: #b91c1c; /* deep red text */
  }

  /* Slightly different variant (your v2 badges have subtler BGs) */
  .badge-red-v2 {
    background-color: #ffe4e6; /* blush red */
    color: #be123c; /* darker rose red */
  }

  /* Dark mode override (optional—matches your theme logic) */
  .dark .badge-red {
    background-color: #7f1d1d;
    color: #fee2e2;
  }

  .dark .badge-red-v2 {
    background-color: #831843;
    color: #ffe4e6;
  }

    /* Light red background block (replacement for bg-ns-green) */
  .bg-ns-red {
    background-color: #fee2e2; /* light red */
  }

  /* Optional: dark mode version */
  .dark .bg-ns-red {
    background-color: #7f1d1d; /* dark red */
  }

  .badge-gray-light {gap: 6px;
    font-size: 16px;
    font-weight: 500;
    padding: 6px 12px;}

    /* Fix the About Us heading color */
  #about h2.text-accent {
    color: var(--color-white) !important; /* or var(--color-accent) if you prefer */
  }

  /* Also reset the paragraph under it just in case it picked up red too */
  #about p {
    color: rgba(255, 255, 255, 0.8) !important;
  }

.hero-text-color-2 {
  background-image: linear-gradient(
    45deg,
    #990000,
    #3a3a3a,
    #e06666,
    #2a2a2a,
    #990000
  );
}

.text-primary-500 {
  color: #DC143C !important; /* Crimson */
}

body {
  font-size: 18px;   /* was ~14–16px */
  font-weight: 500;  /* slightly bold */
  line-height: 1.6;
}

p,
.text-tagline-2 {
  font-size: 1.125rem; /* 18px */
  font-weight: 500;
  line-height: 1.65;
}

.text-tagline-3 {
  font-size: 0.95rem; 
  font-weight: 400;
  line-height: 1.25;
}

@media (min-width: 925px) {
  .h-8 {
    height: 50px !important;
  }
}

header {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.4);
}

.dark header {
  background: rgba(15, 15, 18, 0.75);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.uniform-card {
  border-radius: 20px;
  padding: 2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Numbers */
.stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: #ef4444; /* premium red */
  display: flex;
  align-items: center;
}

/* Make + and $ visible */
.stat-number span {
  color: #ef4444 !important;
}

/* Label under number */
.stat-label {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  margin-top: 0.25rem;
}

h5 {font-size: xx-large;}

/* Row container */
.rgi-hero-card-row {
  position: relative;
  max-width: 350px;
  margin: 3rem auto 0;
  height: 484px;
}

/* Each card is a 3D container */
.rgi-hero-card {
  position: absolute;
  top: 0;
  left: 50%;
  cursor: pointer;
  transition:
    transform 0.45s ease,
    z-index 0.45s ease;
  perspective: 1200px;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden; /* fixes white corners */
}

/* Positions (your original overlap layout) */
.rgi-hero-card[data-rgi-position="left"] {
  transform: translateX(-120%) translateY(28px) rotate(-10deg) scale(0.9);
  z-index: 1;
}
.rgi-hero-card[data-rgi-position="center"] {
  transform: translateX(-50%) translateY(0) rotate(0deg) scale(1.05);
  z-index: 3;
}
.rgi-hero-card[data-rgi-position="right"] {
  transform: translateX(20%) translateY(28px) rotate(10deg) scale(0.9);
  z-index: 2;
}
.rgi-hero-card[data-rgi-position="left"]:hover {
  transform: translateX(-125%) translateY(22px) rotate(-10deg) scale(0.93);
}
.rgi-hero-card[data-rgi-position="right"]:hover {
  transform: translateX(25%) translateY(22px) rotate(10deg) scale(0.93);
}

/* Flip inner wrapper */
.rgi-hero-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

/* Faces */
.rgi-hero-card-face {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Front face — just shows the image */
.rgi-hero-card-front {
  transform: rotateY(0deg);
}

/* Back face – dark red blurb side */
.rgi-hero-card-back {
  transform: rotateY(180deg);
  background: #991b1b;
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}

/* Flip state */
.rgi-hero-card-inner.is-flipped {
  transform: rotateY(180deg);
}

/* Back text styling */
.rgi-hero-card-title {
  color: #f9fafb;
  font-size: 1.5rem;
  font-weight: 600;
  text-align:center;
}

.rgi-hero-card-text {
  color: #fee2e2;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Optional: extra shadow on center card */
.rgi-hero-card[data-rgi-position="center"] .rgi-hero-card-inner {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

/* Mobile tweaks for rotating hero cards */
@media (max-width: 768px) {
  .rgi-hero-card-row {
    max-width: 200px;      /* narrower row */
    height: 360px;         /* shorter cards */
    margin: 2.5rem auto 0;
  }

  .rgi-hero-card {
    border-radius: 16px;
  }

  .rgi-hero-card-face {
    border-radius: 16px;
  }

  /* Tighter positions so they still overlap but aren't crazy */
  .rgi-hero-card[data-rgi-position="left"] {
    transform: translateX(-100%) translateY(16px) rotate(-8deg) scale(0.9);
  }

  .rgi-hero-card[data-rgi-position="center"] {
    transform: translateX(-50%) translateY(0) rotate(0deg) scale(1.02);
  }

  .rgi-hero-card[data-rgi-position="right"] {
    transform: translateX(0%) translateY(16px) rotate(8deg) scale(0.9);
  }

  .rgi-hero-card[data-rgi-position="left"]:hover {
    transform: translateX(-112%) translateY(12px) rotate(-8deg) scale(0.92);
  }

  .rgi-hero-card[data-rgi-position="right"]:hover {
    transform: translateX(12%) translateY(12px) rotate(8deg) scale(0.92);
  }

  /* Back text smaller on mobile */
  .rgi-hero-card-back {
    padding: 1.1rem 1.25rem;
  }

  .rgi-hero-card-title {
    font-size: 1rem;
  }

  .rgi-hero-card-text {
    font-size: 0.75rem;
    line-height: 1.5;
  }
}

@media (max-width: 400px) {
  .rgi-hero-card-row {
    max-width: 180px;
    height: 340px;
    margin: 2.5rem auto 0;
  }

  .rgi-hero-card {
    border-radius: 16px;
  }

  .rgi-hero-card-face {
    border-radius: 16px;
  }

  /* Pull side cards further IN so they don't stick out */
  .rgi-hero-card[data-rgi-position="left"] {
    transform: translateX(-90%) translateY(16px) rotate(-6deg) scale(0.9);
  }

  .rgi-hero-card[data-rgi-position="center"] {
    transform: translateX(-50%) translateY(0) rotate(0deg) scale(1.02);
  }

  .rgi-hero-card[data-rgi-position="right"] {
    transform: translateX(-10%) translateY(16px) rotate(6deg) scale(0.9);
  }

  .rgi-hero-card[data-rgi-position="left"]:hover {
    transform: translateX(-95%) translateY(12px) rotate(-6deg) scale(0.92);
  }

  .rgi-hero-card[data-rgi-position="right"]:hover {
    transform: translateX(-5%) translateY(12px) rotate(6deg) scale(0.92);
  }

  .rgi-hero-card-back {
    padding: 1.1rem 1.25rem;
  }

  .rgi-hero-card-title {
    font-size: 1rem;
  }

  .rgi-hero-card-text {
    font-size: 0.75rem;
    line-height: 1.5;
  }
}

svg [id^="rect-"] {
  width: 1px;
  height: 3px;
  fill: #7f1d1d;   /* deep steel red */
  opacity: 0.05;   /* subtle */
}

@media (max-width: 768px) {
  svg [id^="rect-"] {
    width: 2px;
    height: 3px;
    opacity: 0.25;   /* a bit more visible on small screens */
  }
    #hero svg {
    transform: translateY(-300px);
  }
}

@media (max-width: 400px) {
  svg [id^="rect-"] {
    width: 2px;
    height: 3px;
    opacity: 0.25;   /* a bit more visible on small screens */
  }
    #hero svg {
    transform: translateY(300px);
  }
  .badge-gray-light {gap: 6px;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 12px;}
}

.partners {
  text-align:center;
}

.md\:py-25 {padding-block: calc(var(--spacing) * 10)!important;}

.copyright {text-align: center;
}

@media only screen and (max-width: 600px) {

    .footer-main .left {

        padding-right: 10px;

    }

    .footer-main .right {

        padding-left: 10px;

    }

    .footer-logo {

        margin: -.6rem auto 3.6rem;

    }

    .footer-bottom {

        padding-bottom: .6rem;

    }

   /* .footer-bottom .copyright span {

        display: block;

    } */

    .footer-bottom .copyright span::after {

        display: none;

    }

    .go-top {

        right: 0;

        bottom: 0;

    }
    .none-mobile {

        display: none;

    }

    .break-mobile {

        display: block;

    }

}