/* =====================================================================
   PRIVACY (RESOURCES) PAGE — Mobile-First (XS <576px)
   ===================================================================== */
:root {
  --p-blue: #26a7fe;
  --p-green: #02cb64;
  --p-t-1: rgba(0, 0, 0, 0.90);
  --p-t-2: rgba(0, 0, 0, 0.70);
  --p-t-3: rgba(0, 0, 0, 0.60);
  --p-title: #132a3f;
  --p-card-border: #d6d6d6;
  --p-gradient: linear-gradient(180deg, #26a7fe 0%, #02cb64 100%);
}

/* =====================================================================
   HERO — XS (<576px)
   ===================================================================== */
.pr-hero {
  padding: 0 20px;
}

p {
  margin: 0;
}

.pr-hero-bg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border-radius: 20px;
  background-color: #ffffff;
  overflow: hidden;
  background-image: url(../images/common/review-bg.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 120px 0;
}

.pr-hero-title {
  text-align: center;
  line-height: 78px;
  color: var(--t-title);
  font-size: 60px;
  font-weight: 800;
  padding: 0 20px;
}

.pr-hero-breadcrumb {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  margin-top: 20px;
}

.pr-breadcrumb-item:nth-child(2) .pr-breadcrumb-text {
  background: var(--p-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.pr-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 4px;
  border-radius: 4px;
  padding: 4px;
  height: 32px;

}

.pr-hero-breadcrumb a.pr-breadcrumb-text:hover {
  background: var(--p-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pr-desc {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  padding: 80px 20px;
  font-family: Figtree;
}

.pr-desc p {
  color: var(--p-t-3);
  font-size: 18px;
  font-weight: 400;
  line-height: 160%;
  /* 28.8px */
}

.pr-opts {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 80px;
  padding: 0 20px 80px;
  font-family: Figtree;
}

.pr-opts h1 {
  color: var(--p-t-1);
  font-size: 36px;
  font-weight: 600;
}

.pr-opts h2 {
  color: var(--p-t-2);
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: 50px;
}

.pr-opts h3 {
  color: var(--p-t-2);
  font-size: 18px;
  font-weight: 700;
  line-height: 29px;
}

.pr-opts a.pr-email {
  color: var(--p-blue);
  font-size: 18px;
  font-weight: 400;
  line-height: 160%;
  /* 28.8px */
  text-decoration: none;
}

.pr-opts a.pr-email:hover {
  color: #51B9FD;
}

.pr-opts a.pr-email:active {
  color: #1E86CA;
}

@media (min-width: 1200px) {
  .pr-desc {
    padding: 80px 40px;
  }

  .pr-opts {
    padding: 0 40px 80px;
  }
}

@media (min-width: 1600px) {
  .pr-desc {
    padding: 80px 240px;
  }

  .pr-opts {
    padding: 0 240px 80px;
  }
}

@media (min-width: 1920px) {
  .pr-desc {
    padding: 80px 320px;
  }

  .pr-opts {
    padding: 0 320px 80px;
  }

  .pr-desc .pr-text {
    width: 1200px;
    margin: auto;
  }

  .pr-opts .pr-opts-content {
    width: 1200px;
    margin: auto;
  }
}

/* Mobile (<420px): hero title font-size 48px */
@media (max-width: 420px) {
  .pr-hero-title {
    font-size: 48px;
  }
}