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

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

.page-contact__hero-section {
  background-color: #000000; /* Main color for hero background */
  color: #FFFFFF; /* White text for dark background */
  padding: 80px 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.page-contact__hero-title {
  font-size: 3.2em;
  margin-bottom: 20px;
  line-height: 1.2;
  color: #FFFFFF;
}

.page-contact__hero-description {
  font-size: 1.3em;
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: #F0F0F0;
}

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

.page-contact__hero-button--primary {
  background-color: #FCBC45; /* Login button color */
  color: #000000; /* Dark text for bright button */
}

.page-contact__hero-button--primary:hover {
  background-color: #e0a73a;
}

.page-contact__section-title {
  font-size: 2.5em;
  color: #000000;
  text-align: center;
  margin-bottom: 20px;
  padding-top: 60px;
}

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

.page-contact__contact-methods {
  padding: 60px 0;
  background-color: #FFFFFF;
}

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

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

.page-contact__method-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.page-contact__method-icon {
  width: 250px; /* Minimum 200px, but visually larger for cards */
  height: auto;
  margin-bottom: 20px;
  border-radius: 5px;
}

.page-contact__method-title {
  font-size: 1.8em;
  color: #000000;
  margin-bottom: 15px;
}

.page-contact__method-text {
  color: #555555;
  margin-bottom: 25px;
}

.page-contact__method-button {
  display: inline-block;
  padding: 12px 25px;
  background-color: #000000; /* Main color for buttons */
  color: #FFFFFF; /* White text for dark button */
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.page-contact__method-button:hover {
  background-color: #333333;
}

.page-contact__common-inquiries {
  background-color: #F2F2F2;
  padding: 60px 0;
}

.page-contact__inquiry-list {
  list-style: none;
  padding: 0;
  max-width: 900px;
  margin: 40px auto;
}

.page-contact__inquiry-list li {
  background-color: #FFFFFF;
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  font-size: 1.1em;
  color: #333333;
  line-height: 1.8;
}

.page-contact__inquiry-list li strong {
  color: #000000;
}

.page-contact__button {
  display: block;
  width: fit-content;
  margin: 40px auto 0 auto;
  padding: 15px 30px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  transition: background-color 0.3s ease;
}

.page-contact__button--secondary {
  background-color: #000000; /* Main color for secondary button */
  color: #FFFFFF;
}

.page-contact__button--secondary:hover {
  background-color: #333333;
}

.page-contact__feedback-form {
  padding: 60px 0;
  background-color: #FFFFFF;
}

.page-contact__form {
  max-width: 700px;
  margin: 40px auto 0 auto;
  padding: 30px;
  background-color: #F8F8F8;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

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

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

.page-contact__form-input,
.page-contact__form-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  font-size: 1em;
  box-sizing: border-box;
  color: #333333;
  background-color: #FFFFFF;
}

.page-contact__form-textarea {
  resize: vertical;
  min-height: 120px;
}

.page-contact__form-submit-button {
  display: block;
  width: 100%;
  padding: 15px;
  background-color: #FCBC45; /* Login button color */
  color: #000000; /* Dark text for bright button */
  border: none;
  border-radius: 5px;
  font-size: 1.2em;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.page-contact__form-submit-button:hover {
  background-color: #e0a73a;
}

.page-contact__commitment {
  padding: 60px 0;
  background-color: #EFEFEF;
  text-align: center;
}

.page-contact__commitment-image {
  max-width: 800px; /* Minimum 200px */
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-top: 40px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.page-contact__social-media {
  padding: 60px 0;
  background-color: #FFFFFF;
}

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

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

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

.page-contact__social-icon {
  width: 64px; /* Image size as per placeholder, but CSS rule for content area images is minimum 200px. These are social icons, which are typically small and managed by shared components. However, if they are rendered within .page-contact, they must adhere. To strictly follow the rule, these icons should be at least 200x200 if they are part of the main content area. Given the context of 'social_facebook', etc., these are typically small. I will make a note that this might be an exception or requires larger image assets if strictly within .page-contact. For now, I'll keep them at 64x64 as per placeholder, but with the understanding that they are 'icon' type, not content images. If the rule applies to ALL img tags, even icons, then this is a conflict. I will assume social icons are generally exempted from the 200px rule if they are clearly decorative and small, or if the rule applies to *content-display images*. If strictly enforced, they need to be larger. I will follow the spirit of 'content display images' for the 200px rule. However, to be safe, I'll ensure any *content* image is >=200px and only decorative icons *if not explicitly stated as content* can be smaller. The rule states 'any img under .page-contact'. This is a strict rule. I will update the placeholder for social icons to be at least 200x200 to comply. */
  min-width: 200px; /* Enforcing the minimum 200px rule for all images within .page-contact */
  min-height: 200px;
  height: auto;
}

.page-contact__social-disclaimer {
  text-align: center;
  margin-top: 30px;
  font-size: 0.9em;
  color: #666666;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.page-contact__faq {
  padding: 60px 0;
  background-color: #F2F2F2;
}

.page-contact__faq-items {
  max-width: 900px;
  margin: 40px auto;
}

.page-contact__faq-item {
  background-color: #FFFFFF;
  padding: 25px;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.3s ease;
}

.page-contact__faq-item:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.page-contact__faq-question {
  font-size: 1.3em;
  color: #000000;
  margin-bottom: 10px;
  cursor: pointer;
}

.page-contact__faq-answer {
  font-size: 1em;
  color: #444444;
  display: none; /* Hidden by default, toggled by JS */
  padding-top: 10px;
  border-top: 1px solid #EEEEEE;
  margin-top: 10px;
}

.page-contact__faq-item.active .page-contact__faq-answer {
  display: block;
}

.page-contact__button--primary {
  background-color: #FCBC45; /* Login button color */
  color: #000000;
}

.page-contact__button--primary:hover {
  background-color: #e0a73a;
}

.page-contact__global-presence {
  padding: 60px 0 80px 0;
  background-color: #000000;
  color: #FFFFFF;
  text-align: center;
}

.page-contact__global-presence .page-contact__section-title {
  color: #FFFFFF;
}

.page-contact__global-presence .page-contact__section-description {
  color: #E0E0E0;
}

.page-contact__global-presence-image {
  max-width: 1000px; /* Minimum 200px */
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-top: 40px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .page-contact__hero-title {
    font-size: 2.8em;
  }
  .page-contact__section-title {
    font-size: 2em;
  }
  .page-contact__hero-description,
  .page-contact__section-description {
    font-size: 1em;
  }
}

@media (max-width: 768px) {
  .page-contact__hero-section {
    padding: 60px 15px;
    min-height: 300px;
  }
  .page-contact__hero-title {
    font-size: 2.2em;
  }
  .page-contact__hero-description {
    font-size: 0.95em;
  }
  .page-contact__section-title {
    font-size: 1.8em;
    padding-top: 40px;
  }
  .page-contact__section-description {
    margin-bottom: 30px;
  }
  .page-contact__method-card {
    padding: 25px;
  }
  .page-contact__method-icon {
    width: 200px; /* Ensure minimum 200px */
    height: auto;
  }
  .page-contact__method-title {
    font-size: 1.6em;
  }
  .page-contact__inquiry-list li,
  .page-contact__faq-question,
  .page-contact__faq-answer {
    font-size: 0.95em;
  }
  .page-contact__form {
    padding: 20px;
  }
  .page-contact__form-input,
  .page-contact__form-textarea {
    padding: 10px;
  }
  .page-contact__form-submit-button {
    font-size: 1.1em;
    padding: 12px;
  }
  .page-contact__commitment-image,
  .page-contact__global-presence-image {
    max-width: 100%;
    height: auto;
  }
  .page-contact__social-icon {
    min-width: 200px; /* Enforcing minimum 200px for all images */
    min-height: 200px;
  }
  
  /* Mobile content area images must be constrained */
  .page-contact img {
    max-width: 100%;
    height: auto;
  }
  
  /* Ensure no horizontal scrolling */
  .page-contact {
    overflow-x: hidden;
  }
}

@media (max-width: 480px) {
  .page-contact__hero-title {
    font-size: 1.8em;
  }
  .page-contact__hero-description {
    font-size: 0.9em;
  }
  .page-contact__hero-button {
    padding: 12px 20px;
    font-size: 1em;
  }
  .page-contact__section-title {
    font-size: 1.5em;
  }
  .page-contact__method-grid {
    grid-template-columns: 1fr;
  }
  .page-contact__method-card {
    padding: 20px;
  }
  .page-contact__method-icon {
    width: 200px; /* Ensure minimum 200px */
    height: auto;
  }
  .page-contact__method-title {
    font-size: 1.4em;
  }
  .page-contact__button {
    padding: 12px 20px;
    font-size: 1em;
  }
  .page-contact__social-icon {
    min-width: 200px; /* Enforcing minimum 200px for all images */
    min-height: 200px;
  }
}