.page-support {
  --primary-color: #11A84E;
  --secondary-color: #22C768;
  --text-main-color: #F2FFF6;
  --text-secondary-color: #A7D9B8;
  --card-bg-color: #11271B;
  --background-color: #08160F;
  --border-color: #2E7A4E;
  --button-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
  
  color: var(--text-main-color);
  background-color: var(--background-color);
  font-family: Arial, sans-serif;
  line-height: 1.6;
  font-size: 16px;
}

.page-support__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-support__section {
  padding: 60px 0;
  text-align: center;
}

.page-support__section-title {
  font-size: 2.5em;
  font-weight: bold;
  color: var(--text-main-color);
  margin-bottom: 20px;
}

.page-support__section-description {
  font-size: 1.1em;
  color: var(--text-secondary-color);
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero Section */
.page-support__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 10px; /* Small top padding */
  padding-bottom: 60px;
  overflow: hidden;
}

.page-support__hero-image-wrapper {
  width: 100%;
  max-height: 600px; /* Limit height to prevent image from being too tall */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-support__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.page-support__hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  margin-top: 40px;
  padding: 0 20px;
}

.page-support__main-title {
  font-size: clamp(2em, 4vw, 3.5em);
  font-weight: bold;
  color: var(--text-main-color);
  margin-bottom: 20px;
  line-height: 1.2;
}

.page-support__description {
  font-size: 1.2em;
  color: var(--text-secondary-color);
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.page-support__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.page-support__btn-primary,
.page-support__btn-secondary {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.page-support__btn-primary {
  background: var(--button-gradient);
  color: #ffffff;
  border: 2px solid transparent;
}

.page-support__btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.page-support__btn-secondary {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.page-support__btn-secondary:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Cards */
.page-support__card {
  background-color: var(--card-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: var(--text-main-color);
}

.page-support__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.page-support__card-title {
  font-size: 1.5em;
  font-weight: bold;
  color: var(--primary-color);
  margin-top: 15px;
  margin-bottom: 10px;
}

.page-support__card img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* FAQ Section */
.page-support__faq-section {
  background-color: var(--background-color);
}

.page-support__faq-item {
  background-color: var(--card-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 15px;
  text-align: left;
  overflow: hidden;
  color: var(--text-secondary-color);
}

.page-support__faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  font-weight: bold;
  font-size: 1.2em;
  color: var(--text-main-color);
  cursor: pointer;
  list-style: none;
}

.page-support__faq-item summary::-webkit-details-marker {
  display: none;
}

.page-support__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.page-support__faq-qtext {
  flex-grow: 1;
}

.page-support__faq-toggle {
  font-size: 1.5em;
  margin-left: 15px;
  color: var(--primary-color);
}

.page-support__faq-answer {
  padding: 0 25px 20px;
  color: var(--text-secondary-color);
  font-size: 1em;
  line-height: 1.7;
}

/* Contact Methods Section */
.page-support__contact-methods {
  background-color: var(--background-color);
}

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

.page-support__contact-card p {
  color: var(--text-secondary-color);
  margin-bottom: 20px;
}

/* Game Rules Section */
.page-support__game-rules {
  background-color: var(--background-color);
}

.page-support__rules-list {
  list-style: none;
  padding: 0;
  max-width: 800px;
  margin: 40px auto;
  text-align: left;
}

.page-support__rules-list li {
  background-color: var(--card-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 15px 25px;
  font-size: 1.1em;
  color: var(--text-secondary-color);
}

.page-support__rules-list li a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
}

.page-support__rules-list li a:hover {
  text-decoration: underline;
}

.page-support__center-cta {
  margin-top: 40px;
}

/* Responsible Gaming Section */
.page-support__responsible-gaming {
  background-color: var(--background-color);
}

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

.page-support__info-card p {
  color: var(--text-secondary-color);
}

/* Technical Support Section */
.page-support__technical-support {
  background-color: var(--background-color);
}

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

.page-support__tech-item p {
  color: var(--text-secondary-color);
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-support {
    font-size: 15px;
  }

  .page-support__section {
    padding: 40px 0;
  }

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

  .page-support__section-description {
    font-size: 1em;
    margin-bottom: 30px;
  }

  .page-support__hero-section {
    padding-bottom: 40px;
  }

  .page-support__hero-image-wrapper {
    max-height: 300px;
  }

  .page-support__main-title {
    font-size: 1.8em;
  }

  .page-support__description {
    font-size: 1em;
  }

  .page-support__cta-buttons {
    flex-direction: column;
    gap: 15px;
    padding: 0 15px;
  }

  .page-support__btn-primary,
  .page-support__btn-secondary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 20px;
    font-size: 1em;
    margin: 0 auto;
  }

  .page-support__container {
    padding: 0 15px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-support__card {
    padding: 20px;
  }

  .page-support__card img,
  .page-support img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .page-support__contact-grid,
  .page-support__info-cards,
  .page-support__tech-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 15px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-support__rules-list {
    padding: 0 15px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-support__faq-item summary {
    padding: 15px 20px;
    font-size: 1.1em;
  }

  .page-support__faq-answer {
    padding: 0 20px 15px;
  }

  .page-support__hero-image {
    width: 100%;
    height: auto;
  }
}

/* Ensure no filter is used on images */
.page-support img {
  filter: none; /* Explicitly ensure no filter */
}

/* Content area image CSS dimensions lower bound */
.page-support img {
  min-width: 200px;
  min-height: 200px;
}

/* Override specific element min-width/height if necessary for smaller elements that are not content images, e.g., icons within text. However, the rule states 'any img' so this needs careful handling. Assuming all images are content images. */
.page-support__contact-card img, 
.page-support__info-card img {
  width: 100%; /* Ensure they fill card width */
  height: auto;
  min-width: 200px; /* Enforce min size for card images */
  min-height: 200px;
}

/* Specific adjustment for the hero image to ensure it covers the full width but respects max-height */
.page-support__hero-image {
  width: 100%;
  height: auto; /* Allow height to adjust naturally */
  min-width: 1200px; /* Ensure a minimum width for desktop, allowing it to scale down via max-width */
  min-height: 675px; /* Maintain aspect ratio */
  object-fit: cover;
}

@media (max-width: 768px) {
  .page-support__hero-image {
    min-width: unset;
    min-height: unset;
  }
}