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

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

.page-contact__hero-section {
  position: relative;
  padding: 100px 20px;
  padding-top: var(--header-offset, 120px); /* Ensure content is below fixed header */
  background-color: #0a0a0a; /* Dark background for hero */
  color: #ffffff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  overflow: hidden;
}

.page-contact__hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin-bottom: 30px;
}

.page-contact__hero-title {
  font-size: 3.2em;
  margin-bottom: 20px;
  color: #26A9E0; /* Brand color for emphasis */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

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

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

.page-contact__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.page-contact__section-title {
  font-size: 2.5em;
  text-align: center;
  margin-bottom: 20px;
  color: #26A9E0;
  font-weight: bold;
}

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

/* Methods Section */
.page-contact__methods-section {
  padding: 80px 0;
  background-color: #1a1a1a; /* Slightly lighter dark background */
  color: #ffffff;
}

.page-contact__methods-section .page-contact__section-description {
  color: #cccccc;
}

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

.page-contact__method-card {
  background-color: rgba(255, 255, 255, 0.05); /* Semi-transparent card background */
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

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

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

.page-contact__method-text {
  font-size: 1em;
  color: #cccccc;
  margin-bottom: 20px;
  flex-grow: 1;
}

.page-contact__email, .page-contact__phone {
  font-size: 1.1em;
  font-weight: bold;
  color: #26A9E0;
  margin-bottom: 20px;
}

/* Contact Form Section */
.page-contact__form-section {
  padding: 80px 0;
  background-color: #0a0a0a;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-contact__form-section .page-contact__section-description {
  color: #cccccc;
}

.page-contact__contact-form {
  max-width: 700px;
  width: 100%;
  margin-top: 40px;
  padding: 40px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

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

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

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

.page-contact__form-input::placeholder,
.page-contact__form-textarea::placeholder {
  color: #aaa;
}

.page-contact__form-input:focus,
.page-contact__form-textarea:focus {
  outline: none;
  border-color: #26A9E0;
  box-shadow: 0 0 0 3px rgba(38, 169, 224, 0.5);
}

.page-contact__form-textarea {
  resize: vertical;
}

.page-contact__form-image {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin-top: 40px;
  border-radius: 10px;
  object-fit: cover;
  min-width: 200px; /* Ensure min size */
  min-height: 200px; /* Ensure min size */
}

/* FAQ Section */
.page-contact__faq-section {
  padding: 80px 0;
  background-color: #1a1a1a;
  color: #ffffff;
}

.page-contact__faq-section .page-contact__section-description {
  color: #cccccc;
}

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

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

.page-contact__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s ease;
}

.page-contact__faq-question:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.page-contact__faq-heading {
  margin: 0;
  font-size: 1.2em;
  color: #26A9E0;
}

.page-contact__faq-toggle {
  font-size: 1.8em;
  font-weight: bold;
  color: #ffffff;
  transition: transform 0.3s ease;
}

.page-contact__faq-item.active .page-contact__faq-toggle {
  transform: rotate(45deg);
}

.page-contact__faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 30px;
  transition: max-height 0.3s ease, padding 0.3s ease;
  color: #cccccc;
}

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

.page-contact__faq-answer p {
  margin: 0;
}

.page-contact__faq-image {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 40px auto 0 auto;
  display: block;
  border-radius: 10px;
  object-fit: cover;
  min-width: 200px; /* Ensure min size */
  min-height: 200px; /* Ensure min size */
}

/* Social Section */
.page-contact__social-section {
  padding: 80px 0;
  background-color: #0a0a0a;
  color: #ffffff;
}

.page-contact__social-section .page-contact__section-description {
  color: #cccccc;
}

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

.page-contact__social-icon-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
  font-size: 1.1em;
  transition: color 0.3s ease;
}

.page-contact__social-icon-link:hover {
  color: #26A9E0;
}

.page-contact__social-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
  min-width: 200px; /* Ensure min size, but these are icons, so this is a conflict. I'll use smaller values for these specific icon-like images as an exception, but they should be content images if possible. If not, the prompt is conflicting. I will make them larger than 200px if possible, or use alternative imagery. The prompt says 'no small icons' and 'any width or height less than 200px'. This means these social icons must be content images of at least 200x200px. I will adjust the width/height attributes in HTML and ensure the CSS also reflects this. */
  min-height: 200px; /* Ensure min size */
}

.page-contact__social-icon-link:hover .page-contact__social-icon {
  transform: scale(1.1);
}

/* CTA Section */
.page-contact__cta-section {
  padding: 80px 0;
  background-color: #1a1a1a;
  color: #ffffff;
  text-align: center;
}

.page-contact__cta-section .page-contact__section-description {
  color: #cccccc;
}

/* Buttons */
.page-contact__btn-primary,
.page-contact__btn-secondary {
  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, color 0.3s ease, border-color 0.3s ease;
  border: 2px solid transparent;
  margin-top: 20px;
  cursor: pointer;
  box-sizing: border-box;
  max-width: 100%; /* Ensure button responsiveness */
  white-space: normal;
  word-wrap: break-word;
}

.page-contact__btn-primary {
  background-color: #26A9E0;
  color: #ffffff;
  border-color: #26A9E0;
}

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

.page-contact__btn-secondary {
  background-color: transparent;
  color: #26A9E0;
  border-color: #26A9E0;
}

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

.page-contact__cta-button {
  margin-top: 40px;
  padding: 18px 40px;
  font-size: 1.3em;
}

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

@media (max-width: 768px) {
  .page-contact__hero-section {
    padding: 80px 15px;
    padding-top: var(--header-offset, 120px) !important; /* Apply header offset for mobile */
  }

  .page-contact__hero-title {
    font-size: 2.2em;
  }

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

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

  .page-contact__section-description {
    font-size: 0.95em;
  }

  .page-contact__methods-section,
  .page-contact__form-section,
  .page-contact__faq-section,
  .page-contact__social-section,
  .page-contact__cta-section {
    padding: 60px 0;
  }

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

  .page-contact__methods-grid {
    grid-template-columns: 1fr;
  }

  .page-contact__method-card {
    padding: 25px;
  }

  .page-contact__contact-form {
    padding: 30px;
  }

  .page-contact__faq-question {
    padding: 15px 20px;
  }

  .page-contact__faq-heading {
    font-size: 1.1em;
  }

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

  .page-contact__faq-item.active .page-contact__faq-answer {
    padding: 10px 20px 20px 20px;
  }

  .page-contact__social-links {
    gap: 20px;
  }

  /* Image and Video responsiveness */
  .page-contact img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .page-contact video,
  .page-contact__video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .page-contact__hero-image-wrapper,
  .page-contact__contact-form,
  .page-contact__faq-list,
  .page-contact__social-links,
  .page-contact__cta-section {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Prevent horizontal scroll */
  }

  .page-contact__btn-primary,
  .page-contact__btn-secondary,
  .page-contact a[class*="button"],
  .page-contact a[class*="btn"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-contact__cta-button {
    font-size: 1.1em;
    padding: 15px 25px;
  }

  .page-contact__social-icon {
    width: 200px; /* Adjust to meet min size requirement */
    height: 200px; /* Adjust to meet min size requirement */
    object-fit: contain;
  }

}

@media (max-width: 480px) {
  .page-contact__hero-title {
    font-size: 1.8em;
  }
  .page-contact__section-title {
    font-size: 1.5em;
  }
  .page-contact__btn-primary,
  .page-contact__btn-secondary {
    font-size: 1em;
    padding: 12px 20px;
  }
  .page-contact__cta-button {
    font-size: 1em;
    padding: 12px 20px;
  }
}