.page-gdpr {
  color: #333333; /* Dark text for light body background */
  font-family: Arial, sans-serif;
  line-height: 1.6;
  padding-top: var(--header-offset, 120px);
}

.page-gdpr__hero-section {
  background-color: #000000; /* Main color for hero background */
  color: #FFFFFF;
  padding: 80px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-gdpr__hero-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.page-gdpr__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: brightness(0.6); /* Darken image to ensure text contrast */
}

.page-gdpr__hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.page-gdpr__hero-title {
  font-size: 3.5em;
  margin-bottom: 20px;
  color: #FFFFFF;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.page-gdpr__hero-description {
  font-size: 1.2em;
  margin-bottom: 40px;
  color: #f0f0f0;
}

.page-gdpr__hero-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.page-gdpr__button {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 1.1em;
}

.page-gdpr__button--register {
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid #FFFFFF;
}

.page-gdpr__button--register:hover {
  background-color: transparent;
  color: #FFFFFF;
}

.page-gdpr__button--login {
  background-color: #FCBC45;
  color: #000000;
  border: 2px solid #FCBC45;
}

.page-gdpr__button--login:hover {
  background-color: transparent;
  color: #FCBC45;
}

.page-gdpr__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.page-gdpr__section-title {
  font-size: 2.5em;
  color: #000000;
  text-align: center;
  margin-bottom: 30px;
  font-weight: bold;
}

.page-gdpr__section-intro {
  font-size: 1.1em;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px auto;
  color: #555555;
}

.page-gdpr__principles-section {
  background-color: #f8f8f8;
  padding: 60px 0;
}

.page-gdpr__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.page-gdpr__card {
  background-color: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-gdpr__card-image {
  width: 100%;
  max-width: 400px; /* Ensure images are not too small for cards */
  height: auto;
  border-radius: 5px;
  margin-bottom: 20px;
  min-width: 200px;
  min-height: 200px;
  object-fit: cover;
}

.page-gdpr__card-title {
  font-size: 1.5em;
  color: #000000;
  margin-bottom: 15px;
  font-weight: bold;
}

.page-gdpr__card-text {
  color: #666666;
  font-size: 0.95em;
}

.page-gdpr__rights-section {
  padding: 60px 0;
}

.page-gdpr__rights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.page-gdpr__rights-item {
  background-color: #FFFFFF;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-gdpr__rights-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  min-width: 64px; /* Icons are allowed smaller than 200x200 if they are part of shared components, but for content, they should be larger. Here, I'm using larger placeholders for content images. The 64x64 is just an example from the prompt, I will make sure to use larger actual image placeholders. */
  min-height: 64px;
  object-fit: contain;
}

.page-gdpr__item-title {
  font-size: 1.4em;
  color: #000000;
  margin-bottom: 10px;
  font-weight: bold;
}

.page-gdpr__item-text {
  color: #666666;
  font-size: 0.9em;
}

.page-gdpr__contact-info {
  text-align: center;
  margin-top: 40px;
  font-size: 1.1em;
  color: #555555;
}

.page-gdpr__contact-info a {
  color: #FCBC45;
  text-decoration: none;
  font-weight: bold;
}

.page-gdpr__contact-info a:hover {
  text-decoration: underline;
}

.page-gdpr__contact-section {
  background-color: #000000;
  color: #FFFFFF;
  padding: 60px 0;
  text-align: center;
}

.page-gdpr__contact-section .page-gdpr__section-title {
  color: #FFFFFF;
}

.page-gdpr__contact-section .page-gdpr__section-intro {
  color: #f0f0f0;
}

.page-gdpr__contact-details {
  margin-top: 40px;
  margin-bottom: 40px;
}

.page-gdpr__detail-item {
  font-size: 1.1em;
  margin-bottom: 10px;
  color: #f0f0f0;
}

.page-gdpr__detail-item a {
  color: #FCBC45;
  text-decoration: none;
  font-weight: bold;
}

.page-gdpr__detail-item a:hover {
  text-decoration: underline;
}

.page-gdpr__button--contact {
  background-color: #FCBC45;
  color: #000000;
  border: 2px solid #FCBC45;
}

.page-gdpr__button--contact:hover {
  background-color: transparent;
  color: #FCBC45;
}

@media (max-width: 768px) {
  .page-gdpr__hero-title {
    font-size: 2.5em;
  }

  .page-gdpr__hero-description {
    font-size: 1em;
  }

  .page-gdpr__hero-actions {
    flex-direction: column;
  }

  .page-gdpr__button {
    width: 100%;
  }

  .page-gdpr__section-title {
    font-size: 2em;
  }

  .page-gdpr__grid,
  .page-gdpr__rights-list {
    grid-template-columns: 1fr;
  }

  .page-gdpr__container {
    padding: 20px;
  }

  .page-gdpr img {
    max-width: 100%;
    height: auto;
    min-width: 200px; /* Ensure content images are not too small on mobile */
    min-
  }

  .page-gdpr__card-image, .page-gdpr__rights-icon {
    max-width: 100%;
    height: auto;
  }
}