/* style/contact.css */

/* Custom Colors */
:root {
  --page-contact-bg: #08160F;
  --page-contact-card-bg: #11271B;
  --page-contact-text-main: #F2FFF6;
  --page-contact-text-secondary: #A7D9B8;
  --page-contact-button-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
  --page-contact-border: #2E7A4E;
  --page-contact-glow: #57E38D;
  --page-contact-gold: #F2C14E;
  --page-contact-divider: #1E3A2A;
  --page-contact-deep-green: #0A4B2C;
}

.page-contact {
  background-color: var(--page-contact-bg);
  color: var(--page-contact-text-main);
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* Utility classes for layout */
.page-contact__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Hero Section */
.page-contact__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  padding-top: 10px; /* Small top padding, body handles header offset */
  text-align: center;
  overflow: hidden;
}

.page-contact__hero-image-wrapper {
  width: 100%;
  max-width: 100%;
  margin-bottom: 30px;
}

.page-contact__hero-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.page-contact__hero-content {
  width: 100%;
  max-width: 800px;
}

.page-contact__main-title {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--page-contact-text-main);
  margin-bottom: 20px;
  line-height: 1.2;
  text-shadow: 0 0 10px rgba(87, 227, 141, 0.4);
}

.page-contact__intro-text {
  font-size: 1.15rem;
  color: var(--page-contact-text-secondary);
  margin-bottom: 30px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

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

/* Buttons */
.page-contact__btn-primary,
.page-contact__btn-secondary,
.page-contact__btn-small,
.page-contact__large-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
}

.page-contact__btn-primary {
  background: var(--page-contact-button-gradient);
  color: var(--page-contact-text-main);
  border: 2px solid transparent;
  box-shadow: 0 4px 15px rgba(42, 209, 111, 0.4);
}

.page-contact__btn-primary:hover {
  background: linear-gradient(180deg, #13994A 0%, #2AD16F 100%);
  box-shadow: 0 6px 20px rgba(42, 209, 111, 0.6);
  transform: translateY(-2px);
}

.page-contact__btn-secondary {
  background-color: transparent;
  color: var(--page-contact-glow);
  border: 2px solid var(--page-contact-glow);
}

.page-contact__btn-secondary:hover {
  background-color: var(--page-contact-glow);
  color: var(--page-contact-bg);
  transform: translateY(-2px);
}

.page-contact__btn-small {
  padding: 10px 20px;
  font-size: 0.9rem;
}

.page-contact__large-cta {
  padding: 18px 35px;
  font-size: 1.2rem;
  margin-top: 40px;
  min-width: 250px;
}

/* Section Titles and Descriptions */
.page-contact__section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--page-contact-gold);
  text-align: center;
  margin-bottom: 20px;
  margin-top: 60px;
  font-weight: 700;
}

.page-contact__section-description {
  font-size: 1rem;
  color: var(--page-contact-text-secondary);
  text-align: center;
  max-width: 900px;
  margin: 0 auto 40px auto;
}

/* Info Section */
.page-contact__info-section {
  padding: 80px 0;
  background-color: var(--page-contact-bg);
}

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

.page-contact__info-card {
  background-color: var(--page-contact-card-bg);
  border: 1px solid var(--page-contact-border);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.page-contact__card-title {
  font-size: 1.5rem;
  color: var(--page-contact-glow);
  margin-bottom: 15px;
}

.page-contact__info-card p {
  color: var(--page-contact-text-secondary);
  margin-bottom: 15px;
}

.page-contact__contact-detail {
  font-weight: 600;
  color: var(--page-contact-text-main);
  margin-bottom: 10px;
}

/* Form Section */
.page-contact__form-section {
  padding: 80px 0;
  background-color: var(--page-contact-deep-green);
}

.page-contact__contact-form {
  background-color: var(--page-contact-card-bg);
  border: 1px solid var(--page-contact-border);
  border-radius: 12px;
  padding: 40px;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

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

.page-contact__form-label {
  display: block;
  font-size: 1.1rem;
  color: var(--page-contact-text-main);
  margin-bottom: 8px;
  font-weight: 600;
}

.page-contact__form-input,
.page-contact__form-textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--page-contact-border);
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.3);
  color: var(--page-contact-text-main);
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.page-contact__form-input:focus,
.page-contact__form-textarea:focus {
  border-color: var(--page-contact-glow);
  outline: none;
}

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

.page-contact__submit-button {
  width: auto;
  padding: 15px 40px;
  font-size: 1.1rem;
  cursor: pointer;
}

/* Social Section */
.page-contact__social-section {
  padding: 80px 0;
  background-color: var(--page-contact-bg);
  text-align: center;
}

.page-contact__social-links {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 40px;
  margin-bottom: 50px;
}

.page-contact__social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--page-contact-card-bg);
  color: var(--page-contact-glow);
  font-size: 1.5rem;
  text-decoration: none;
  border: 1px solid var(--page-contact-border);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  overflow: hidden; /* Hide text, use aria-label */
  text-indent: -9999px;
}

.page-contact__social-icon::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  text-indent: 0;
}

.page-contact__social-facebook::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2357E38D"><path d="M12 2.04C6.51 2.04 2 6.55 2 12.04c0 5.01 3.65 9.18 8.44 9.94v-7h-2.54v-2.96h2.54V9.03c0-2.5 1.53-3.87 3.75-3.87 1.08 0 2.01.08 2.28.12v2.6h-1.54c-1.2 0-1.44.57-1.44 1.41v1.85h2.92l-.48 2.96h-2.44v7.05c4.79-.76 8.44-4.93 8.44-9.94 0-5.49-4.51-10-10-10z"/></svg>');
}
.page-contact__social-twitter::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2357E38D"><path d="M22.46 6c-.82.38-1.7.64-2.6.76.95-.56 1.68-1.45 2.02-2.52-.88.52-1.86.9-2.91 1.1-.83-.88-2.02-1.43-3.33-1.43-2.52 0-4.57 2.05-4.57 4.57 0 .36.04.7.12 1.02-3.8-.19-7.17-2-9.43-4.78-.4.69-.63 1.49-.63 2.34 0 1.58.8 2.97 2.02 3.79-.74-.02-1.44-.23-2.05-.57v.06c0 2.22 1.58 4.07 3.67 4.49-.38.1-.78.15-1.19.15-.29 0-.58-.03-.86-.08.58 1.82 2.26 3.14 4.25 3.18-1.57 1.23-3.56 1.96-5.72 1.96-.37 0-.74-.02-1.1-.06 2.02 1.29 4.42 2.05 7 2.05 8.4 0 13.02-6.97 13.02-13.02 0-.2-.01-.4-.02-.6.9-.65 1.68-1.47 2.3-2.4z"/></svg>');
}
.page-contact__social-instagram::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2357E38D"><path d="M12 2c2.71 0 3.05.01 4.12.06 1.07.05 1.79.22 2.42.47.66.27 1.25.64 1.82 1.21.57.57.94 1.16 1.21 1.82.25.63.42 1.35.47 2.42.05 1.07.06 1.41.06 4.12s-.01 3.05-.06 4.12c-.05 1.07-.22 1.79-.47 2.42-.27.66-.64 1.25-1.21 1.82-.57.57-1.16.94-1.82 1.21-.63.25-1.35.42-2.42.47-1.07.05-1.41.06-4.12.06s-3.05-.01-4.12-.06c-1.07-.05-1.79-.22-2.42-.47-.66-.27-1.25-.64-1.82-1.21-.57-.57-.94-1.16-1.21-1.82-.25-.63-.42-1.35-.47-2.42-.05-1.07-.06-1.41-.06-4.12s.01-3.05.06-4.12c.05-1.07.22-1.79.47-2.42.27-.66.64-1.25 1.21-1.82.57-.57 1.16-.94 1.82-1.21.63-.25 1.35-.42 2.42-.47C8.95 2.01 9.29 2 12 2zm0 2.4c-2.47 0-2.78.01-3.74.06-.96.04-1.56.2-1.95.36-.42.17-.74.39-1.01.66-.27.27-.49.59-.66 1.01-.17.39-.32.99-.36 1.95-.05.96-.06 1.27-.06 3.74s.01 2.78.06 3.74c.04.96.2 1.56.36 1.95.17.42.39.74.66 1.01.27.27.59.49 1.01.66.39.17.99.32 1.95.36.96.05 1.27.06 3.74.06s2.78-.01 3.74-.06c.96-.04 1.56-.2 1.95-.36.42-.17.74-.39 1.01-.66.27-.27.49-.59.66-1.01.17-.39.32-.99.36-1.95.05-.96.06-1.27.06-3.74s-.01-2.78-.06-3.74c-.04-.96-.2-1.56-.36-1.95-.17-.42-.39-.74-.66-1.01-.27-.27-.59-.49-1.01-.66-.39-.17-.99-.32-1.95-.36-.96-.05-1.27-.06-3.74-.06zm0 3c-2.42 0-4.38 1.96-4.38 4.38s1.96 4.38 4.38 4.38 4.38-1.96 4.38-4.38-1.96-4.38-4.38-4.38zm0 2.4c1.09 0 1.98.89 1.98 1.98s-.89 1.98-1.98 1.98-1.98-.89-1.98-1.98.89-1.98 1.98-1.98zm6.6-6.42c-.54 0-.98.44-.98.98s.44.98.98.98.98-.44.98-.98-.44-.98-.98-.98z"/></svg>');
}
.page-contact__social-telegram::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2357E38D"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.3 8.3c-.1-.08-.25-.1-.4-.05l-8.4 3.2c-.22.08-.43.1-.63.05-.28-.06-.49-.24-.6-.5-.11-.26-.11-.57-.02-.85L7.4 8.7c.07-.2.2-.35.37-.44.18-.08.38-.1.57-.05l4.8 1.48c.17.05.3.17.35.35.05.18.03.38-.05.54l-2.6 2.46c-.1.08-.16.2-.16.33 0 .13.06.25.16.33.08.08.19.12.3.12.11 0 .22-.04.3-.12l3.4-2.5c.2-.15.3-.35.3-.57 0-.22-.1-.43-.3-.57z"/></svg>');
}

.page-contact__social-icon:hover {
  background-color: var(--page-contact-glow);
  border-color: var(--page-contact-glow);
  transform: translateY(-3px) scale(1.05);
}

.page-contact__social-icon:hover::before {
  filter: invert(1) hue-rotate(180deg) brightness(1.5); /* Change SVG color on hover */
}

.page-contact__social-image {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: 50px auto 0 auto;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* FAQ Section */
.page-contact__faq-section {
  padding: 80px 0;
  background-color: var(--page-contact-deep-green);
}

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

.page-contact__faq-item {
  background-color: var(--page-contact-card-bg);
  border: 1px solid var(--page-contact-border);
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.page-contact__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--page-contact-text-main);
  background-color: var(--page-contact-card-bg);
  transition: background-color 0.3s ease;
}

.page-contact__faq-question:hover {
  background-color: rgba(34, 199, 104, 0.1);
}

.page-contact__faq-item[open] > .page-contact__faq-question {
  background-color: rgba(34, 199, 104, 0.2);
}

.page-contact__faq-toggle {
  font-size: 1.8rem;
  line-height: 1;
  color: var(--page-contact-glow);
  transition: transform 0.3s ease;
}

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

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

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

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

.page-contact__faq-image {
  width: 100%;
  max-width: 700px;
  height: auto;
  display: block;
  margin: 50px auto 0 auto;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* Commitment Section */
.page-contact__commitment-section {
  padding: 80px 0;
  background-color: var(--page-contact-bg);
  text-align: center;
}

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

.page-contact__commitment-list li {
  font-size: 1.1rem;
  color: var(--page-contact-text-main);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.page-contact__list-icon {
  color: var(--page-contact-glow);
  font-size: 1.5rem;
  margin-right: 15px;
  line-height: 1;
}

.page-contact__final-cta {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--page-contact-gold);
  margin-top: 50px;
  margin-bottom: 30px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-contact__hero-section {
    padding: 40px 15px;
    padding-top: 10px !important;
  }

  .page-contact__main-title {
    font-size: 2.2rem;
  }

  .page-contact__intro-text,
  .page-contact__section-description {
    font-size: 1rem;
    padding: 0 10px;
  }

  .page-contact__cta-buttons {
    flex-direction: column;
    gap: 15px;
  }

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

  .page-contact__info-section,
  .page-contact__form-section,
  .page-contact__social-section,
  .page-contact__faq-section,
  .page-contact__commitment-section {
    padding: 50px 0;
  }

  .page-contact__info-card,
  .page-contact__contact-form {
    padding: 25px;
  }

  .page-contact__form-label {
    font-size: 1rem;
  }

  .page-contact__submit-button {
    width: 100%;
  }

  .page-contact__social-links {
    gap: 15px;
    flex-wrap: wrap;
  }

  .page-contact__social-icon {
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
  }

  .page-contact__faq-question {
    font-size: 1.05rem;
    padding: 15px 20px;
  }

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

  .page-contact__commitment-list {
    padding: 0 15px;
  }

  /* Ensure all images are responsive */
  .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__hero-image-wrapper,
  .page-contact__social-image,
  .page-contact__faq-image {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden !important;
  }
  
  .page-contact__hero-image-wrapper { /* Override to ensure no extra padding if image is full width */
      padding-left: 0 !important;
      padding-right: 0 !important;
  }

  .page-contact__social-icon:hover::before {
    filter: none; /* Disable filter change on hover for mobile to avoid performance issues and ensure consistency */
  }
}

@media (max-width: 480px) {
  .page-contact__main-title {
    font-size: 1.8rem;
  }
  .page-contact__section-title {
    font-size: 1.5rem;
  }
  .page-contact__hero-content {
    padding: 0 10px;
  }
  .page-contact__info-card {
    padding: 20px;
  }
  .page-contact__contact-form {
    padding: 20px;
  }
  .page-contact__faq-question {
    font-size: 1rem;
  }
}