/* style/contact.css */
:root {
  --primary-color: #2F6BFF;
  --secondary-color: #6FA3FF;
  --button-gradient: linear-gradient(180deg, #4A8BFF 0%, #2F6BFF 100%);
  --card-bg: #FFFFFF;
  --body-bg: #F4F7FB;
  --text-main: #1F2D3D;
  --text-dark: #000000;
  --border-color: #D6E2FF;
  --glow-color: #A5C4FF;
}

/* Base styles for the contact page */
.page-contact {
  font-family: Arial, sans-serif;
  color: var(--text-main); /* Default text color for the page content */
  background-color: var(--body-bg);
  line-height: 1.6;
  padding-bottom: 60px; /* Add some padding to the bottom */
}

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

/* Hero Section */
.page-contact__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 10px; /* Small top padding, body handles --header-offset */
  background-color: var(--body-bg);
}

.page-contact__hero-image-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.page-contact__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.page-contact__hero-content {
  max-width: 800px;
  padding: 40px 20px;
  background-color: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  margin-top: -80px; /* Overlap with image for visual effect */
  position: relative;
  z-index: 1;
}

.page-contact__main-title {
  font-size: clamp(2em, 4vw, 2.5em); /* H1 font size constraint */
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 15px;
  line-height: 1.2;
}

.page-contact__description {
  font-size: 1.1em;
  color: var(--text-main);
  margin-bottom: 30px;
}

/* Buttons */
.page-contact__btn-primary,
.page-contact__btn-secondary {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.page-contact__btn-primary {
  background: var(--button-gradient);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.page-contact__btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.page-contact__btn-secondary {
  background: var(--card-bg);
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-contact__btn-secondary:hover {
  background: var(--primary-color);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Section common styles */
.page-contact__section-title {
  font-size: clamp(1.8em, 3.5vw, 2.2em);
  color: var(--text-dark);
  text-align: center;
  margin-bottom: 15px;
  font-weight: 700;
}

.page-contact__section-description {
  font-size: 1.05em;
  color: var(--text-main);
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px auto;
}

/* Contact Form Section */
.page-contact__form-section {
  padding: 80px 0;
  background-color: var(--body-bg);
}

.page-contact__form-content {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  background-color: var(--card-bg);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.page-contact__contact-form {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-contact__form-group {
  display: flex;
  flex-direction: column;
}

.page-contact__form-label {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-dark);
}

.page-contact__form-input,
.page-contact__form-textarea {
  padding: 12px 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 1em;
  color: var(--text-main);
  background-color: #fcfdff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

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

.page-contact__form-input:focus,
.page-contact__form-textarea:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--primary-color), 0.2);
}

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

.page-contact__form-image-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-contact__form-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  min-width: 200px; /* Ensure minimum size */
  min-height: 200px; /* Ensure minimum size */
}

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

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

.page-contact__info-card {
  background-color: var(--card-bg);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-contact__info-icon-wrapper {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: var(--secondary-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 15px rgba(var(--secondary-color), 0.3);
}

.page-contact__info-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* This filter is to make the icon white, assuming icons are black. It does not change the original image color but adjusts for contrast. If icon is already white, this won't be needed. */
}

.page-contact__info-card-title {
  font-size: 1.4em;
  color: var(--text-dark);
  margin-bottom: 10px;
  font-weight: 600;
}

.page-contact__info-card-text {
  color: var(--text-main);
  margin-bottom: 20px;
  flex-grow: 1;
}

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

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

.page-contact__faq-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
}

.page-contact__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 25px;
  font-size: 1.15em;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

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

.page-contact__faq-toggle {
  font-size: 1.5em;
  line-height: 1;
  color: var(--primary-color);
  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;
  color: var(--text-main);
  font-size: 1em;
}

/* Responsive Design */
@media (max-width: 992px) {
  .page-contact__form-content {
    flex-direction: column;
    align-items: center;
  }

  .page-contact__form-image-wrapper {
    margin-top: 40px;
  }

  .page-contact__hero-content {
    margin-top: -40px; /* Less overlap on smaller screens */
  }
}

@media (max-width: 768px) {
  .page-contact__container {
    padding: 0 15px;
  }

  .page-contact__hero-content {
    padding: 30px 15px;
  }

  .page-contact__main-title {
    font-size: clamp(1.8em, 6vw, 2.2em);
  }

  .page-contact__section-title {
    font-size: clamp(1.6em, 5.5vw, 2em);
  }

  .page-contact__btn-primary,
  .page-contact__btn-secondary {
    width: 100% !important; /* Force full width on mobile */
    padding: 15px 20px;
  }

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

  .page-contact__form-content {
    padding: 30px 20px;
  }

  .page-contact img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  .page-contact__hero-image-wrapper,
  .page-contact__form-image-wrapper,
  .page-contact__info-icon-wrapper,
  .page-contact__form-section .page-contact__container,
  .page-contact__info-section .page-contact__container,
  .page-contact__faq-section .page-contact__container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden !important;
  }

  .page-contact__hero-section {
    padding-top: 10px !important;
  }

  .page-contact__info-icon {
    filter: brightness(0) invert(1) !important; /* Ensure white icons on colored background */
  }
}

@media (max-width: 480px) {
  .page-contact__hero-content {
    margin-top: -20px;
  }
  .page-contact__form-content {
    padding: 20px 15px;
  }
  .page-contact__faq-question {
    padding: 15px 20px;
    font-size: 1em;
  }
  .page-contact__faq-answer {
    padding: 0 20px 15px 20px;
  }
}