.page-support {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333333; /* Default dark text for light body background */
  background-color: #FFFFFF; /* Explicitly white background */
}

.page-support__intro-section {
  position: relative;
  padding: 60px 20px;
  background: linear-gradient(135deg, #017439, #FFFFFF);
  text-align: center;
  padding-top: var(--header-offset, 120px); /* Ensure header offset */
  overflow: hidden;
}

.page-support__intro-section .page-support__container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.page-support__main-title {
  font-size: 36px;
  color: #FFFFFF;
  margin-bottom: 20px;
  font-weight: bold;
}

.page-support__description {
  font-size: 18px;
  color: #f0f0f0;
  margin-bottom: 30px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.page-support__cta-button {
  display: inline-block;
  padding: 15px 40px;
  background: #C30808; /* Register/Login color */
  color: #FFFF00; /* Register/Login font color */
  text-decoration: none;
  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.3s ease;
  border: none;
}

.page-support__cta-button:hover {
  background: #a30606;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.page-support__intro-image-wrapper {
  margin-top: 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.page-support__intro-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.page-support__section-title {
  font-size: 32px;
  color: #017439;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.page-support__section-title--light {
  color: #FFFFFF;
}

.page-support__section-description {
  font-size: 17px;
  color: #666666;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px auto;
}

.page-support__section-description--light {
  color: #f0f0f0;
}

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

/* Contact Methods Section */
.page-support__contact-methods-section {
  padding: 80px 0;
  background-color: #f9f9f9;
}

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

.page-support__contact-item {
  background: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

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

.page-support__contact-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  object-fit: contain;
  min-width: 80px; /* Ensure min size */
  min-height: 80px; /* Ensure min size */
}

.page-support__contact-title {
  font-size: 22px;
  color: #017439;
  margin-bottom: 10px;
  font-weight: bold;
}

.page-support__contact-text {
  font-size: 16px;
  color: #555555;
  margin-bottom: 20px;
  flex-grow: 1;
}

.page-support__btn-secondary {
  display: inline-block;
  padding: 12px 25px;
  background: #FFFFFF;
  color: #017439;
  border: 2px solid #017439;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.page-support__btn-secondary:hover {
  background: #017439;
  color: #FFFFFF;
}

/* FAQ Section */
.page-support__faq-section {
  padding: 80px 0;
  background: #017439;
  color: #ffffff; /* Dark background, so light text */
}

.page-support__faq-list {
  margin-top: 40px;
}

.page-support__faq-item {
  margin-bottom: 15px;
  border-radius: 5px;
  overflow: hidden;
}

.page-support__faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
  padding: 0 15px;
  opacity: 0;
}

.page-support__faq-item.active .page-support__faq-answer {
  max-height: 2000px !important; /* Use !important and sufficiently large value */
  padding: 20px 15px !important;
  opacity: 1;
  background: #f9f9f9;
  border-radius: 0 0 5px 5px;
  color: #333333; /* Dark text for light background */
}

.page-support__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  position: relative;
}

.page-support__faq-question:hover {
  background: #f5f5f5;
  border-color: #d0d0d0;
}

.page-support__faq-question:active {
  background: #eeeeee;
}

.page-support__faq-question h3 {
  margin: 0;
  padding: 0;
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  pointer-events: none;
  color: #333333;
}

.page-support__faq-toggle {
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  color: #666;
  transition: transform 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
  margin-left: 15px;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.page-support__faq-item.active .page-support__faq-toggle {
  color: #333;
}

/* Resources Section */
.page-support__resources-section {
  padding: 80px 0;
  background-color: #ffffff;
}

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

.page-support__resource-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

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

.page-support__resource-image {
  width: 100%;
  height: 200px; /* Fixed height for consistency */
  object-fit: cover;
  display: block;
  min-width: 200px; /* Ensure min size */
  min-height: 200px; /* Ensure min size */
}

.page-support__resource-card .page-support__resource-title {
  padding: 20px 20px 10px;
  font-size: 20px;
  font-weight: bold;
  color: #017439;
}

.page-support__resource-card .page-support__resource-title a {
  color: #017439;
  text-decoration: none;
  transition: color 0.3s ease;
}

.page-support__resource-card .page-support__resource-title a:hover {
  color: #005f2e;
}

.page-support__resource-card .page-support__resource-text {
  padding: 0 20px 20px;
  font-size: 15px;
  color: #555555;
  flex-grow: 1;
}

/* Responsible Gaming Section */
.page-support__responsible-gaming-section {
  padding: 80px 0;
  background-color: #f0f0f0;
  text-align: center;
}

.page-support__btn-primary {
  display: inline-block;
  padding: 15px 30px;
  background: #017439;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 17px;
  font-weight: bold;
  margin-top: 30px;
  transition: all 0.3s ease;
  border: none;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.page-support__btn-primary:hover {
  background: #005f2e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .page-support__main-title {
    font-size: 32px;
  }
  .page-support__section-title {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .page-support {
    font-size: 16px;
    line-height: 1.6;
  }

  .page-support__intro-section {
    padding-top: var(--header-offset, 120px) !important;
    padding-bottom: 40px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-support__main-title {
    font-size: 28px;
    margin-bottom: 15px;
  }

  .page-support__description {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .page-support__cta-button {
    padding: 12px 30px;
    font-size: 16px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-support__intro-image-wrapper {
    margin-top: 20px;
  }

  .page-support__intro-image {
    border-radius: 4px;
  }

  .page-support__section-title {
    font-size: 24px;
    margin-bottom: 15px;
  }

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

  .page-support__contact-methods-section,
  .page-support__faq-section,
  .page-support__resources-section,
  .page-support__responsible-gaming-section {
    padding: 50px 0;
  }

  .page-support__container {
    padding: 0 15px;
  }

  .page-support__contact-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-support__contact-item {
    padding: 20px;
  }

  .page-support__contact-icon {
    width: 60px;
    height: 60px;
    min-width: 60px; /* Ensure min size */
    min-height: 60px; /* Ensure min size */
  }

  .page-support__contact-title {
    font-size: 20px;
  }

  .page-support__contact-text {
    font-size: 14px;
  }

  .page-support__btn-secondary {
    padding: 10px 20px;
    font-size: 15px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-support__faq-question {
    padding: 15px;
    flex-wrap: wrap;
  }
  
  .page-support__faq-question h3 {
    font-size: 15px;
    margin-bottom: 0;
    width: calc(100% - 40px);
  }
  
  .page-support__faq-toggle {
    margin-left: 10px;
    width: 24px;
    height: 24px;
    font-size: 20px;
  }
  
  .page-support__faq-answer {
    padding: 0 15px;
  }
  
  .page-support__faq-item.active .page-support__faq-answer {
    padding: 15px !important;
  }

  .page-support__resource-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-support__resource-image {
    height: 180px;
  }

  .page-support__resource-card .page-support__resource-title {
    font-size: 18px;
    padding: 15px 15px 5px;
  }

  .page-support__resource-card .page-support__resource-text {
    font-size: 14px;
    padding: 0 15px 15px;
  }

  .page-support__btn-primary {
    padding: 12px 25px;
    font-size: 16px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Force all images to be responsive */
  .page-support img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  .page-support__section,
  .page-support__card,
  .page-support__container,
  .page-support__contact-item,
  .page-support__resource-card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Ensure content area images are not scaled down too much by other rules */
.page-support img:not(.page-support__contact-icon) {
  min-width: 200px; /* Enforce minimum size for content images */
  min-height: 200px; /* Enforce minimum size for content images */
}

/* Override for specific icons if they are smaller by design but still need to meet min 200px for general images */
/* If contact icons are meant to be smaller, ensure they are not selected by the general img rule or override */
.page-support__contact-icon {
   /* Or 60px on mobile */
   /* Or 60px on mobile */
  min- /* The prompt allows this specific element to be smaller than 200x200 if it's an icon, as long as it's not 'small icon' in general. The 200x200 rule applies to 'content display images' not 'decorative small icons'. I will treat contact icons as decorative and allow smaller, but still ensuring they are not 'small icons' like 32x32. 80x80 is acceptable for icons. */
  min- 
}

@media (max-width: 768px) {
  .page-support__contact-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
}