/* ═══════════════════════════════════════════════════════════════════════════
   TESTIMONIALS PAGE
   Cards use normal document flow (position: relative, height: auto) so they
   grow with their content. Avatar images and card backgrounds remain
   position: absolute within each card.
   ═══════════════════════════════════════════════════════════════════════════ */

.TESTIMONIALS {
  background-color: var(--color-brand-bg);
  overflow: hidden;
  width: 100%;
  min-width: 1280px;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  /* top padding clears the nav (120px) + breathing room;
     bottom padding reserves space for the footer (131px) + gap */
  padding-top: 160px;
  padding-bottom: 175px;
  box-sizing: border-box;
}

/* ─── Shared card layout ─────────────────────────────────────────────────── */
/*
 * Cards are in normal flow, centred with margin: auto.
 * padding-top: 155px clears the avatar (max ~146px tall) that pokes above
 * the card border. The card border backgrounds start at a fixed pixel offset
 * so they align with the original design regardless of card height.
 */

.TESTIMONIALS .joe-allen,
.TESTIMONIALS .dan-mitran,
.TESTIMONIALS .ntt-testimonial {
  position: relative;
  width: 621px;
  height: auto;
  margin: 0 auto 48px;
  box-shadow: none;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 155px 28px 32px;
  gap: 12px;
  box-sizing: border-box;
}

.TESTIMONIALS .ntt-testimonial {
  isolation: isolate; /* renamed from .NTT-testimonial */
}

.TESTIMONIALS .dan-mitran {
  margin-bottom: 0; /* last card */
}



/* ─── Card backgrounds (extend to card bottom) ───────────────────────────── */

.TESTIMONIALS .rectangle {
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(14px) brightness(105%);
  -webkit-backdrop-filter: blur(14px) brightness(105%);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.TESTIMONIALS .rectangle-3 {
  position: absolute;
  top: 63px;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(14px) brightness(105%);
  -webkit-backdrop-filter: blur(14px) brightness(105%);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.TESTIMONIALS .div {
  position: absolute;
  top: 77px;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(14px) brightness(105%);
  -webkit-backdrop-filter: blur(14px) brightness(105%);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  z-index: 0;
}

/* ─── Avatar images (fixed pixel dimensions, absolute top-right) ─────────── */

.TESTIMONIALS .img {
  position: absolute;
  width: 22.38%;
  height: 135px;
  top: 0;
  left: 74.07%;
  border-radius: 50%;
  object-fit: cover;

}



.TESTIMONIALS .dan-mitran-portrait {
  position: absolute;
  top: -2px;
  left: 463px;
  width: 141px;
  height: 141px;
  border-radius: 50%;
  object-fit: cover;

}

.TESTIMONIALS .group-6 {
  position: absolute;
  top: -5px;
  left: 462px;
  width: 143px;
  height: 143px;
  filter: drop-shadow(0 0 0 transparent);
}




/* ─── Viliana portrait ───────────────────────────────────────────────────── */

.TESTIMONIALS .ntt-portrait {
  position: absolute;
  width: 22.97%;
  height: 143px;
  top: -5px;
  left: 74.56%;
  border-radius: 50%;
  object-fit: cover;

  z-index: 1;
}

/* ─── In-flow text content ───────────────────────────────────────────────── */
/*
 * All heading and body elements are position: relative so they participate
 * in the card's flex column and the card grows to fit them.
 */

/* Joe Allen — heading wrapper */
.TESTIMONIALS .group {
  position: relative;
  width: auto;
  height: auto;
  display: flex;
  z-index: 1;
}

.TESTIMONIALS .joe-allen-CIO {
  font-family: var(--font-family);
  font-weight: var(--font-weight-heading);
  color: var(--color-white);
  font-size: var(--font-size-card-title);
  text-align: left;
  letter-spacing: -0.4px;
  line-height: normal;
}

/* Joe Allen — body */
.TESTIMONIALS .joe-allen-body {
  position: relative;
  width: 100%;
  height: auto;
  font-family: var(--font-family);
  font-weight: var(--font-weight-body);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--font-size-body);
  text-align: justify;
  text-align-last: left;
  letter-spacing: 0;
  line-height: 1.65;
  z-index: 1;
}

/* Dan Mitran — content group */
.TESTIMONIALS .dan-mitran-content {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
}

.TESTIMONIALS .dan-mitran-CEO {
  position: relative;
  width: auto;
  height: auto;
  font-family: var(--font-family);
  font-weight: var(--font-weight-heading);
  color: var(--color-white);
  font-size: var(--font-size-card-title);
  text-align: left;
  letter-spacing: -0.4px;
  line-height: normal;
}

.TESTIMONIALS .professional {
  position: relative;
  width: 100%;
  height: auto;
  font-family: var(--font-family);
  font-weight: var(--font-weight-body);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--font-size-body);
  text-align: justify;
  text-align-last: left;
  letter-spacing: 0;
  line-height: 1.65;
}

/* NTT — heading wrapper */
.TESTIMONIALS .ntt-data-wrapper {
  position: relative;
  width: auto;
  height: auto;
  display: flex;
  z-index: 1;
}

.TESTIMONIALS .ntt-data {
  font-family: var(--font-family);
  font-weight: var(--font-weight-heading);
  color: var(--color-white);
  font-size: var(--font-size-card-title);
  text-align: left;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

/* NTT — body */
.TESTIMONIALS .since-december {
  position: relative;
  width: 100%;
  height: auto;
  font-family: var(--font-family);
  font-weight: var(--font-weight-body);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--font-size-body);
  text-align: justify;
  text-align-last: left;
  letter-spacing: 0;
  line-height: 1.65;
  z-index: 1;
}

/* Shared inline text styles */
.TESTIMONIALS .text-wrapper {
  font-family: var(--font-family);
  font-weight: var(--font-weight-heading);
  color: var(--color-white);
  font-size: var(--font-size-card-title);
  letter-spacing: 0;
}

.TESTIMONIALS .span {
  font-size: var(--font-size-body);
}

/* Ensure NTT content sits above the card background */
.TESTIMONIALS .ntt-testimonial .ntt-data-wrapper,
.TESTIMONIALS .ntt-testimonial .since-december {
  z-index: 1;
}



/* ─── Background ─────────────────────────────────────────────────────────── */

.TESTIMONIALS .background {
  position: absolute;
  top: -7px;
  left: -512px;
  width: 2577px;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.TESTIMONIALS .circuit-board-close {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 19.87%;
  object-fit: cover;
  opacity: 0.04;
}

/* ─── Navigation ─────────────────────────────────────────────────────────── */

.TESTIMONIALS .MENU {
  position: absolute;
  top: 0;
  left: calc(50% - 408px);
  width: 815px;
  height: 120px;
  display: flex;
  z-index: 3;
}

.TESTIMONIALS .MENU-2 {
  flex: 1;
  width: 815px;
  position: relative;
}

.TESTIMONIALS .rectangle-5 {
  position: absolute;
  width: 100vw;
  height: 133.33%;
  top: 0;
  left: calc(408px - 50%);
  background: linear-gradient(
    180deg,
    rgba(68, 67, 68, 0) 0%,
    rgba(68, 67, 68, 0) 100%
  );
}

.TESTIMONIALS .homepage-logo-button {
  display: flex;
  flex-direction: column;
  width: 166px;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  position: absolute;
  top: 22px;
  left: -9px;
}

.TESTIMONIALS .homepage-logo-button.selected {
}

.TESTIMONIALS .homepage-logo-button a {
  display: block;
  width: 100%;
}


.TESTIMONIALS .services-button {
  display: flex;
  flex-direction: column;
  width: 108px;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  position: absolute;
  top: 56px;
  left: 297px;
}

.TESTIMONIALS .div-wrapper {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 19px;
}

.TESTIMONIALS .text-wrapper-2 {
  position: absolute;
  width: 101.14%;
  height: 126.32%;
  top: 0;
  left: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-heading);
  color: var(--color-white);
  font-size: var(--font-size-nav);
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.TESTIMONIALS .testimonials-button {
  display: flex;
  flex-direction: column;
  width: 149px;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  position: absolute;
  top: 56px;
  left: 496px;
}

.TESTIMONIALS .text-wrapper-3 {
  position: absolute;
  width: 100.78%;
  height: 126.32%;
  top: 0;
  left: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-heading);
  color: var(--color-white);
  font-size: var(--font-size-nav);
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.TESTIMONIALS .contact-button {
  display: flex;
  flex-direction: column;
  width: 101px;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  position: absolute;
  top: 56px;
  left: 719px;
}

.TESTIMONIALS .text-wrapper-4 {
  position: absolute;
  width: 100%;
  height: 126.32%;
  top: 0;
  left: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-heading);
  color: var(--color-white);
  font-size: var(--font-size-nav);
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */

.TESTIMONIALS .FOOTER {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 131px;
  width: 100%;
  display: flex;
  z-index: 1;
  overflow: hidden;
}

.TESTIMONIALS .FOOTER::before {
  content: "";
  position: absolute;
  inset: 0;
  filter: blur(2px);
  backdrop-filter: blur(2px) brightness(100%);
  -webkit-backdrop-filter: blur(2px) brightness(100%);
  background: linear-gradient(
    0deg,
    rgba(16, 16, 16, 0.45) 0%,
    rgba(0, 0, 0, 0) 74%
  );
  pointer-events: none;
  z-index: 0;
}

.TESTIMONIALS .group-wrapper {
  flex: 1;
  width: 100%;
  display: flex;
  position: relative;
  z-index: 1;
}

.TESTIMONIALS .group-7 {
  margin-top: 39px;
  width: 682px;
  height: 54px;
  margin-left: calc(50% - 341px);
  position: relative;
}

.TESTIMONIALS .group-8 {
  position: absolute;
  width: 96.48%;
  height: 44.44%;
  top: 25.93%;
  left: 0;
  display: flex;
}

.TESTIMONIALS .group-9 {
  flex: 1;
  width: 660px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.TESTIMONIALS .p {
  font-family: var(--font-family);
  font-weight: var(--font-weight-body);
  color: var(--color-footer-text);
  font-size: var(--font-size-footer);
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}




.TESTIMONIALS .line {
  top: 0;
  position: absolute;
  width: 100%;
  height: 0;
  left: 0;
}

.TESTIMONIALS .line-2 {
  top: 98.15%;
  position: absolute;
  width: 100%;
  height: 0;
  left: 0;
}