/* DHURVI ENTERPRISES — CONTACT PAGE CSS */

/* ---------- 1. CONTACT PAGE HEADER ---------- */
.contact-page-header {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 300px;
  padding: 5rem 0 3rem;
  overflow: hidden;
  background-image:
    linear-gradient(
      90deg,
      rgba(12, 27, 47, 0.86) 0%,
      rgba(12, 27, 47, 0.64) 55%,
      rgba(12, 27, 47, 0.35) 100%
    ),
    url("../images/cont.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.contact-page-header .container {
  position: relative;
  z-index: 1;
}

.contact-page-header h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.contact-page-header .breadcrumb-tf {
  color: #fff;
}

.contact-page-header .breadcrumb-tf a {
  color: #ff8a35;
  text-decoration: none;
}

.contact-page-header .breadcrumb-tf a:hover {
  color: #fff;
  text-decoration: underline;
}

.contact-header-subtitle {
  max-width: 56ch;
  margin: 1rem 0 0;
  color: #f1f4f8;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  line-height: 1.7;
}


/* ---------- 2. CONTACT SECTION ---------- */

.contact-section {
  padding-block: clamp(2rem, 5vw, 4.5rem);
}

.contact-section > .container > .row {
  align-items: stretch;
}

.contact-section > .container > .row > [class*="col-"] {
  min-width: 0;
}


/* ---------- 3. COMPANY DETAILS PANEL ---------- */

.contact-panel {
  height: 100%;
  min-width: 0;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid rgba(16, 28, 50, 0.12);
  border-top: 3px solid var(--laterite);
  border-radius: var(--radius);
  background: var(--white);
  color: #354052;
  box-shadow: 0 6px 20px rgba(16, 28, 50, 0.045);
}

.contact-title {
  margin: 0 0 1.75rem;
  color: var(--navy);
  font-size: clamp(1.65rem, 2.8vw, 2.4rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.contact-list {
  margin: 0;
  padding: 0;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
  margin-bottom: 1.4rem;
}

.contact-item > i {
  flex: 0 0 1.5rem;
  margin-top: 0.15rem;
  color: var(--laterite);
  font-size: 1.35rem;
}

.contact-item > div {
  flex: 1 1 auto;
  min-width: 0;
}

.contact-label {
  display: block;
  margin-bottom: 0.35rem;
  color: #697586;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.contact-item p,
.contact-item a {
  margin: 0;
  color: var(--navy);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.contact-item a {
  text-decoration: none;
}

.contact-item a:hover {
  color: var(--laterite);
  text-decoration: underline;
}


/* ---------- 4. CONTACT ACTION BUTTONS ---------- */

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.contact-actions .btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 124px;
  min-height: 46px;
  margin: 0;
  padding: 0.75rem 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  text-decoration: none;
}

/* Request a Quote */

.contact-actions .btn-tf-primary {
  color: #fff;
}

/* WhatsApp — same default design as Call Now */

.contact-actions .btn-tf-dark {
  color: var(--navy);
  background-color: #fff;
  border: 1px solid var(--navy);
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.contact-actions .btn-tf-dark:hover,
.contact-actions .btn-tf-dark:focus-visible,
.contact-actions .btn-tf-dark:active {
  color: #fff;
  background-color: var(--navy);
  border-color: var(--navy);
}

/* Call Now */

.contact-actions .contact-call {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  color: var(--navy);
  background-color: #fff;
  border: 1px solid var(--navy);
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.contact-actions .contact-call:hover,
.contact-actions .contact-call:focus-visible,
.contact-actions .contact-call:active {
  color: #fff;
  background-color: var(--navy);
  border-color: var(--navy);
}

/* Keyboard accessibility */

.contact-actions .btn:focus-visible,
.contact-item a:focus-visible {
  outline: 3px solid var(--laterite);
  outline-offset: 3px;
}


/* ---------- 5. GOOGLE MAPS ---------- */

.contact-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(16, 28, 50, 0.12);
  border-radius: var(--radius);
  background: #eee9df;
  box-shadow: 0 6px 20px rgba(16, 28, 50, 0.045);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}


/* ---------- 6. TABLET ---------- */

@media (min-width: 576px) and (max-width: 991.98px) {
  .contact-page-header {
    min-height: 270px;
    padding: 4.5rem 0 2.75rem;
    background-position: center;
  }

  .contact-panel {
    padding: 1.5rem;
  }

  .contact-map,
  .contact-map iframe {
    min-height: 360px;
  }

  .contact-actions {
    gap: 0.65rem;
  }

  .contact-actions .btn {
    padding-inline: 0.9rem;
  }
}


/* ---------- 7. SMALL MOBILE ---------- */

@media (max-width: 575.98px) {
  .contact-page-header {
    min-height: 230px;
    padding: 3.5rem 0 2.25rem;
    background-position: center;
  }

  .contact-page-header h1 {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .contact-header-subtitle {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .contact-panel {
    padding: 1.25rem;
  }

  .contact-title {
    margin-bottom: 1.4rem;
    font-size: clamp(1.6rem, 7vw, 2rem);
  }

  .contact-item {
    gap: 0.8rem;
    margin-bottom: 1.2rem;
  }

  .contact-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.65rem;
  }

  .contact-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 0.7rem 0.5rem;
    font-size: 0.85rem;
  }

  /* Quote button takes the full first row */

  .contact-actions .btn-tf-primary {
    grid-column: 1 / -1;
  }

  /* WhatsApp and Call Now remain side by side */

  .contact-actions .btn-tf-dark,
  .contact-actions .contact-call {
    grid-column: auto;
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  .contact-map,
  .contact-map iframe {
    min-height: 300px;
  }
}


/* ---------- 8. EXTRA SMALL SCREENS ---------- */

@media (max-width: 360px) {
  .contact-panel {
    padding: 1rem;
  }

  .contact-actions {
    gap: 0.5rem;
  }

  .contact-actions .btn {
    font-size: 0.78rem;
    padding-inline: 0.35rem;
  }
}