/* =========================================================
   GPS MAP CAMERA — TESTIMONIALS
   UPDATED REAL REVIEW VERSION
========================================================= */

#gmc-testimonial-bento,
#gmc-testimonial-bento * {
  box-sizing: border-box;
}

#gmc-testimonial-bento {
  position: relative;
  width: 100%;
  overflow: hidden;

  padding: 90px 0 90px;

  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  background: #ffffff;
}

/* =========================================================
   SUBTLE BACKGROUND
========================================================= */

#gmc-testimonial-bento::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 8% 22%,
      rgba(52, 120, 246, 0.045),
      transparent 23%
    ),
    radial-gradient(
      circle at 92% 80%,
      rgba(69, 176, 212, 0.035),
      transparent 22%
    );
}

/* =========================================================
   CONTAINER
========================================================= */

.gmc-bento-container {
  position: relative;
  z-index: 2;
}

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

.gmc-bento-header {
  max-width: 850px;

  margin: 0 auto 40px;

  text-align: center;
}

/* EYEBROW */

.gmc-bento-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 29px;

  padding: 7px 13px;

  border: 1px solid #cfe1f7;
  border-radius: 999px;

  background: #f4f8ff;

  color: #3478f6;

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

  font-size: 12px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.075em;

  text-transform: uppercase;
}

.gmc-bento-eyebrow::before {
  content: "";

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #4b94f3;

  box-shadow: 0 0 0 4px rgba(75, 148, 243, 0.1);
}

/* =========================================================
   HEADING
========================================================= */

.gmc-bento-title {
  max-width: 780px;

  margin: 20px auto 0;

  color: #082d5f;

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

  font-size: 35px;
  line-height: 1.18;

  font-weight: 600;

  letter-spacing: -0.035em;
}

.gmc-bento-title span {
  color: #6998f7;

  font-weight: 600;
}

/* =========================================================
   ORIGINAL BENTO GRID
========================================================= */

.gmc-bento-grid {
  display: grid;

  grid-template-columns: repeat(12, minmax(0, 1fr));

  grid-template-rows:
    192px
    192px;

  gap: 12px;
}

/* =========================================================
   CARD POSITIONS
========================================================= */

.gmc-bento-featured {
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
}

.gmc-bento-card-2 {
  grid-column: 4 / span 4;
  grid-row: 1;
}

.gmc-bento-card-3 {
  grid-column: 8 / span 5;
  grid-row: 1;
}

.gmc-bento-card-4 {
  grid-column: 4 / span 5;
  grid-row: 2;
}

.gmc-bento-card-5 {
  grid-column: 9 / span 4;
  grid-row: 2;
}

/* =========================================================
   COMMON CARD
========================================================= */

.gmc-bento-card {
  position: relative;

  min-width: 0;

  display: flex;
  flex-direction: column;

  padding: 17px 18px;

  overflow: hidden;

  border: 1px solid #d8e4f1;
  border-radius: 15px;

  background: #ffffff;

  box-shadow: 0 7px 20px rgba(27, 61, 101, 0.045);

  font-family: "Poppins", sans-serif;
}

/* =========================================================
   FEATURED CARD
========================================================= */

.gmc-bento-featured {
  padding: 18px 18px 17px;

  border-color: #bcd4f3;

  background: linear-gradient(145deg, #edf5ff 0%, #e4f0ff 52%, #dcecff 100%);

  box-shadow: 0 12px 27px rgba(48, 98, 159, 0.085);
}

/* DECORATIVE CIRCLE */

.gmc-bento-featured::before {
  content: "";

  position: absolute;

  width: 145px;
  height: 145px;

  right: -66px;
  top: -68px;

  border: 1px solid rgba(52, 120, 246, 0.1);

  border-radius: 50%;

  pointer-events: none;
}

/* DECORATIVE DOT */

.gmc-bento-featured::after {
  content: "";

  position: absolute;

  right: 15px;
  bottom: 15px;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #3478f6;

  opacity: 0.38;

  box-shadow: 0 0 0 5px rgba(52, 120, 246, 0.08);
}

/* =========================================================
   REVIEW HEADER
   AVATAR LEFT
   NAME + STARS RIGHT
========================================================= */

.gmc-review-head {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
}

/* AVATAR */

.gmc-bento-avatar {
  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  display: grid;
  place-items: center;

  border: 1px solid #d1e0f3;
  border-radius: 50%;
  overflow: hidden;

  background: #edf4ff;

  color: #3478f6;

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

  font-size: 15px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.01em;
}

.gmc-bento-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.gmc-bento-featured .gmc-bento-avatar {
  border-color: #b9d2f4;

  background: #ffffff;
}

/* AVATAR SVG ICONS */

.gmc-avatar-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
  flex-shrink: 0;
}

/* USER META */

.gmc-review-meta {
  min-width: 0;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 5px;
}

/* NAME */

.gmc-review-name {
  color: #12375f;

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

  font-size: 15px;
  line-height: 1.25;

  font-weight: 600;

  letter-spacing: -0.01em;
}

.gmc-bento-featured .gmc-review-name {
  color: #10385f;
}

/* =========================================================
   FIVE STAR RATING
========================================================= */

.gmc-review-stars {
  display: flex;
  align-items: center;

  gap: 2px;

  color: #f5a51c;

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

  font-size: 15px;
  line-height: 1;

  letter-spacing: 0;
}

/* =========================================================
   USE CASE
========================================================= */

.gmc-bento-usecase {
  margin-left: auto;

  display: flex;
  align-items: center;

  gap: 4px;

  color: #8394a7;

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

  font-size: 9px;
  line-height: 1;

  font-weight: 500;

  white-space: nowrap;
}

.gmc-bento-usecase svg {
  width: 10px;
  height: 10px;

  flex: 0 0 10px;
}

/*
   FEATURED CARD IS NARROW,
   SO USE CASE SITS AT BOTTOM.
   IT STILL APPEARS ONLY ONCE.
*/

.gmc-featured-usecase {
  margin: auto 0 0;

  padding-top: 12px;

  justify-content: flex-start;

  color: #6481a3;
}

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

.gmc-bento-review {
  margin: 16px 0 0;

  color: #173550;

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

  font-size: 14px;
  line-height: 1.52;

  font-weight: 400;

  letter-spacing: 0.001em;
}

.gmc-bento-featured .gmc-bento-review {
  margin-top: 18px;

  color: #113b68;

  font-size: 14px;
  line-height: 1.62;
}

/* =========================================================
   IMPORTANT REVIEW TEXT
   NO BACKGROUND HIGHLIGHT
========================================================= */

.gmc-bento-review strong {
  color: inherit;

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

  font-weight: 600;
}

/* =========================================================
   SMALL DECORATIVE DOT
========================================================= */

.gmc-bento-card:not(.gmc-bento-featured)::after {
  content: "";

  position: absolute;

  right: 12px;
  bottom: 12px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #3478f6;

  opacity: 0.15;

  box-shadow: 0 0 0 4px rgba(52, 120, 246, 0.05);
}

/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {
  .gmc-bento-card {
    transition:
      transform 0.22s ease,
      border-color 0.22s ease,
      box-shadow 0.22s ease;
  }

  .gmc-bento-card:hover {
    transform: translateY(-2px);

    border-color: #bfd5ef;

    box-shadow: 0 11px 25px rgba(27, 61, 101, 0.065);
  }

  .gmc-bento-featured:hover {
    border-color: #9fc3ef;

    box-shadow: 0 15px 31px rgba(48, 98, 159, 0.11);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {
  .gmc-bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    grid-template-rows: auto;

    gap: 12px;
  }

  .gmc-bento-featured,
  .gmc-bento-card-2,
  .gmc-bento-card-3,
  .gmc-bento-card-4,
  .gmc-bento-card-5 {
    grid-column: auto;
    grid-row: auto;

    min-height: 210px;
  }

  .gmc-bento-featured {
    grid-column: 1 / -1;

    min-height: 245px;
  }

  .gmc-featured-usecase {
    margin-left: 0;
  }
}

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

@media (max-width: 650px) {
  #gmc-testimonial-bento {
    padding: 58px 0;
  }

  .gmc-bento-header {
    margin-bottom: 30px;
  }

  .gmc-bento-title {
    margin-top: 17px;

    font-size: 31px;
    line-height: 1.22;

    letter-spacing: -0.03em;
  }

  .gmc-bento-grid {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  .gmc-bento-featured,
  .gmc-bento-card-2,
  .gmc-bento-card-3,
  .gmc-bento-card-4,
  .gmc-bento-card-5 {
    grid-column: auto;
    grid-row: auto;

    min-height: 0;
  }

  .gmc-bento-card {
    padding: 17px;

    border-radius: 14px;
  }

  .gmc-bento-featured .gmc-bento-review {
    font-size: 13px;
    line-height: 1.62;
  }

  .gmc-bento-usecase {
    font-size: 8px;
  }
}