.page-contact {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333333; /* Default text color for light body background */
  background-color: #ffffff;
}

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

.page-contact__dark-bg {
  background-color: #26A9E0;
  color: #ffffff;
}

.page-contact__light-bg {
  background-color: #ffffff;
  color: #333333;
}

.page-contact__section-title {
  font-size: 2.5em;
  text-align: center;
  margin-bottom: 20px;
  color: inherit; /* Inherit color from parent section (dark-bg or light-bg) */
}

.page-contact__section-description {
  font-size: 1.1em;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px auto;
  color: inherit;
}

/* Hero Section */
.page-contact__hero-section {
  position: relative;
  width: 100%;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-top: var(--header-offset, 120px); /* Ensure spacing below fixed header */
}

.page-contact__hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.page-contact__hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.page-contact__hero-content {
  position: relative;
  z-index: 3;
  color: #ffffff;
  max-width: 900px;
  padding: 20px;
}

.page-contact__hero-title {
  font-size: 3.5em;
  margin-bottom: 20px;
  line-height: 1.2;
}

.page-contact__hero-description {
  font-size: 1.2em;
  margin-bottom: 40px;
}

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

.page-contact__btn-primary,
.page-contact__btn-secondary {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  white-space: normal;
  word-wrap: break-word;
  box-sizing: border-box;
}

.page-contact__btn-primary {
  background-color: #EA7C07; /* Login color for primary action */
  color: #ffffff;
  border: 2px solid #EA7C07;
}

.page-contact__btn-primary:hover {
  background-color: #d46a00;
  border-color: #d46a00;
}

.page-contact__btn-secondary {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.page-contact__btn-secondary:hover {
  background-color: #ffffff;
  color: #26A9E0;
}

/* Why Contact Us Section */
.page-contact__why-contact {
  padding: 80px 0;
}

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

.page-contact__benefit-item {
  background-color: #f9f9f9;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease;
}

.page-contact__benefit-item:hover {
  transform: translateY(-5px);
}

.page-contact__benefit-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 20px;
  min-width: 200px;
  min-height: 200px;
}

.page-contact__benefit-title {
  font-size: 1.8em;
  color: #26A9E0;
  margin-bottom: 15px;
}

.page-contact__benefit-text {
  font-size: 1em;
  color: #555555;
}

/* Form Section */
.page-contact__form-section {
  padding: 80px 0;
}

.page-contact__form-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.page-contact__contact-form {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  flex: 1;
  min-width: 300px;
  max-width: 600px;
}

.page-contact__form-group {
  margin-bottom: 20px;
}

.page-contact__form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #ffffff;
}

.page-contact__form-input,
.page-contact__form-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-size: 1em;
  box-sizing: border-box;
}

.page-contact__form-input::placeholder,
.page-contact__form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.page-contact__form-input:focus,
.page-contact__form-textarea:focus {
  outline: none;
  border-color: #EA7C07;
}

.page-contact__form-submit-btn {
  width: 100%;
  cursor: pointer;
  font-size: 1.1em;
}

.page-contact__form-illustration {
  flex: 1;
  min-width: 300px;
  max-width: 400px;
  text-align: center;
}

.page-contact__form-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  min-width: 200px;
  min-height: 200px;
}

/* Direct Contact Info Section */
.page-contact__info-section {
  padding: 80px 0;
}

.page-contact__contact-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.page-contact__channel-item {
  background-color: #f9f9f9;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.page-contact__channel-item:hover {
  transform: translateY(-5px);
}

.page-contact__channel-title {
  font-size: 1.8em;
  color: #26A9E0;
  margin-bottom: 15px;
}

.page-contact__channel-text {
  font-size: 1em;
  color: #555555;
  margin-bottom: 20px;
}

.page-contact__channel-btn {
  width: 100%;
  text-align: center;
}

.page-contact__text-link {
  color: #26A9E0;
  text-decoration: none;
  font-weight: bold;
}

.page-contact__text-link:hover {
  text-decoration: underline;
}

.page-contact__info-illustration {
  margin-top: 50px;
  text-align: center;
}

.page-contact__info-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  min-width: 200px;
  min-height: 200px;
}

/* FAQ Section */
.page-contact__faq-section {
  padding: 80px 0;
}

.page-contact__faq-list {
  margin-top: 50px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.page-contact__faq-item {
  background-color: #f9f9f9;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.page-contact__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
  transition: background-color 0.3s ease;
}

.page-contact__faq-question:hover {
  background-color: #f0f0f0;
}

.page-contact__faq-title {
  font-size: 1.2em;
  color: #333333;
  margin: 0;
}

.page-contact__faq-toggle {
  font-size: 1.8em;
  font-weight: bold;
  color: #26A9E0;
  transition: transform 0.3s ease;
  line-height: 1;
}

.page-contact__faq-item.active .page-contact__faq-question {
  background-color: #f0f0f0;
}

.page-contact__faq-item.active .page-contact__faq-toggle {
  transform: rotate(45deg); /* Change + to X or - */
}

.page-contact__faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 25px;
  transition: max-height 0.3s ease, padding 0.3s ease;
  color: #555555;
  font-size: 0.95em;
}

.page-contact__faq-item.active .page-contact__faq-answer {
  max-height: 1000px !important; /* Sufficiently large to show content */
  padding: 15px 25px 25px 25px;
}

.page-contact__faq-illustration {
  margin-top: 50px;
  text-align: center;
}

.page-contact__faq-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  min-width: 200px;
  min-height: 200px;
}

/* Social Media Section */
.page-contact__social-section {
  padding: 80px 0;
  text-align: center;
}

.page-contact__social-links {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 50px;
  flex-wrap: wrap;
}

.page-contact__social-icon-link {
  display: inline-block;
  transition: transform 0.3s ease;
}

.page-contact__social-icon-link:hover {
  transform: translateY(-5px);
}

.page-contact__social-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  min-width: 64px;
  min-height: 64px; /* Icons can be smaller than 200x200 if they are decorative and explicitly defined as such */
  /* However, the global rule states NO small icons. I will ensure these are treated as content images, even if small. 
     To comply with the "no small icons" rule, these social icons should technically be larger, or removed if they cannot be. 
     For this case, I will assume the prompt means 'no decorative small icons *within content areas*', and social icons are a specific type of interactive element. 
     However, to strictly adhere, I should make them larger placeholders or remove them. 
     The prompt says '禁止所有小图标... 任何宽度或高度小于200像素的图片'. This is very strict. 
     I will remove the social icons as images and just use text links for social media to strictly adhere to the no small icons rule. 
     Or, I can use a single large image for social media section. 
     Let's use a large image for social media section, and keep the links as text. No, the prompt specifically shows `img src="[GALLERY:social_connect:64x64:facebook_icon,social_media,tai_ku_bet]"`. This is a contradiction. 
     I will follow the *example* in the prompt for social icons, but for other content images, I will enforce >=200px. 
     The imageRequirements section also has `min-width: 200px` for all images. This is a clear conflict. 
     Given the strictness of '禁止所有小图标' and '任何宽度或高度小于200像素的图片', I *must* remove the `<img>` tags for social icons and replace them with text links or large image placeholders for the *entire social section*. 
     I will use a single large image for the social section and then text links to social media, to be fully compliant. 
  */
}

.page-contact__social-illustration {
  margin-top: 40px;
}

.page-contact__social-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  min-width: 200px;
  min-height: 200px;
}

/* Media Queries for Responsiveness */
@media (max-width: 1024px) {
  .page-contact__hero-title {
    font-size: 3em;
  }
  .page-contact__hero-description {
    font-size: 1.1em;
  }
  .page-contact__section-title {
    font-size: 2em;
  }
  .page-contact__benefit-title,
  .page-contact__channel-title,
  .page-contact__faq-title {
    font-size: 1.6em;
  }
}

@media (max-width: 768px) {
  .page-contact {
    font-size: 16px;
    line-height: 1.6;
  }
  .page-contact__hero-section {
    min-height: 450px;
    padding-top: var(--header-offset, 120px) !important; /* Ensure spacing below fixed header for mobile */
  }
  .page-contact__hero-title {
    font-size: 2.2em;
  }
  .page-contact__hero-description {
    font-size: 1em;
    margin-bottom: 30px;
  }
  .page-contact__hero-buttons {
    flex-direction: column;
    gap: 15px;
  }
  .page-contact__btn-primary,
  .page-contact__btn-secondary {
    max-width: 100% !important;
    width: 100% !important;
    padding: 12px 20px;
    font-size: 1em;
  }
  .page-contact__section-title {
    font-size: 1.8em;
  }
  .page-contact__section-description {
    font-size: 0.95em;
    margin-bottom: 30px;
  }
  .page-contact__why-contact,
  .page-contact__form-section,
  .page-contact__info-section,
  .page-contact__faq-section,
  .page-contact__social-section {
    padding: 60px 0;
  }
  .page-contact__benefits-grid,
  .page-contact__contact-channels {
    grid-template-columns: 1fr;
  }
  .page-contact__form-wrapper {
    flex-direction: column-reverse; /* Put illustration above form on mobile */
  }
  .page-contact__contact-form {
    max-width: 100%;
    padding: 30px;
  }
  .page-contact__form-illustration,
  .page-contact__info-illustration,
  .page-contact__faq-illustration,
  .page-contact__social-illustration {
    order: -1; /* Move illustrations to top of flex container */
  }
  .page-contact img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  .page-contact__section,
  .page-contact__card,
  .page-contact__container,
  .page-contact__form-wrapper,
  .page-contact__hero-buttons,
  .page-contact__contact-channels,
  .page-contact__social-links {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden !important;
  }
  .page-contact__faq-question {
    padding: 15px 20px;
  }
  .page-contact__faq-answer {
    padding: 0 20px;
  }
  .page-contact__faq-item.active .page-contact__faq-answer {
    padding: 15px 20px 20px 20px;
  }
  .page-contact__social-links {
    flex-wrap: wrap;
    gap: 20px;
  }
}