/* ============================================================
   UI refinements - Adv. K. V. Soni   (added 2026-08-01)
   Loaded AFTER css/style.css so these rules win.
   Rules only ADJUST existing classes - no HTML changes, no new
   markup, no colour outside the existing brand palette:
     #3b2414 ink   #50311c dark brown   #983d20 accent
   Nothing here changes layout structure, so functionality and
   the Bootstrap 3 grid are unaffected.
   ============================================================ */

/* ---------- 1. VISUAL HIERARCHY -------------------------------
   Section headings were inheriting body grey (#666) - the same
   colour as paragraph text - which flattened the hierarchy.
   Give them the brand ink, room to breathe and a softer leading. */
.heding-Box h2,
.Choose-Section h2,
.Testimonial h2,
.mission h2 {
  color: #3b2414;
  line-height: 1.25;
  margin-bottom: 14px;
  letter-spacing: 0.2px;
}

/* Eyebrow labels ("INTRODUCING", "OUR SERVICES", "Feedback") */
.heding-Box h4 {
  color: #983d20;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Sub-heading under the name block */
.heding-Box h5 { color: #6b6b6b; line-height: 1.5; }

/* ---------- 2. BODY COPY --------------------------------------
   Slightly longer leading for comfortable reading. */
.About-Home p,
.Choose-Section p,
.mission p,
.Facility-Content .details {
  line-height: 1.75;
  color: #5c5c5c;
}

/* ---------- 3. SERVICE CARDS ----------------------------------
   Were completely flat (no shadow, no radius). Add restrained
   elevation and a hover lift - the single biggest "premium" cue. */
.Facility-Main {
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(59, 36, 20, 0.07), 0 6px 18px rgba(59, 36, 20, 0.06);
  transition: box-shadow .25s ease, transform .25s ease;
  height: 100%;
}
.Facility-Main:hover {
  box-shadow: 0 6px 14px rgba(59, 36, 20, 0.12), 0 16px 34px rgba(59, 36, 20, 0.10);
  transform: translateY(-4px);
}
.Facility-Main .thumb { overflow: hidden; }
.Facility-Main .thumb img { transition: transform .45s ease; }
.Facility-Main:hover .thumb img { transform: scale(1.05); }

.Facility-Content .title {
  line-height: 1.35;
  margin-bottom: 10px;
  color: #3b2414;
}
.Facility-Main:hover .Facility-Content .title { color: #983d20; }
.Facility-Content .title,
.Facility-Content .details { transition: color .2s ease; }

/* ---------- 4. BUTTONS ----------------------------------------
   Brand colours deliberately unchanged - only rhythm, weight
   and interaction feedback are improved. */
.btn-one,
.btn-two,
.buttonStyle {
  letter-spacing: .6px;
  font-weight: 600;
  transition: background-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn-one { padding: 12px 24px; }
.btn-one:hover,
.btn-two:hover,
.buttonStyle:hover {
  box-shadow: 0 4px 12px rgba(59, 36, 20, .22);
  transform: translateY(-1px);
}
.btn-one:active,
.btn-two:active,
.buttonStyle:active { transform: translateY(0); }

/* Keyboard accessibility - the theme had no visible focus ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #983d20;
  outline-offset: 2px;
}

/* ---------- 5. FORMS ------------------------------------------ */
.Contact-Form input,
.Contact-Form textarea {
  transition: border-color .2s ease, box-shadow .2s ease;
}
.Contact-Form input:focus,
.Contact-Form textarea:focus {
  border-color: #983d20;
  box-shadow: 0 0 0 3px rgba(152, 61, 32, .12);
  outline: none;
}

/* ---------- 6. FOOTER ----------------------------------------- */
.single-footer-widget .specialities li a,
.single-footer-widget .facilities li a { transition: color .2s ease, padding-left .2s ease; }
.single-footer-widget .specialities li a:hover,
.single-footer-widget .facilities li a:hover { padding-left: 4px; }

/* ---------- 6b. SERVICE-PAGE SIDEBAR OVERFLOW (bug fix) -------
   .Quick-Contact is display:table with width:90%, margin-left:35px
   and 30px side padding on a content-box, so its border-box width
   exceeded the column and pushed the page into horizontal scroll
   at tablet widths (measured 807px against a 753px viewport on
   every service page). Constrain it; desktop appearance unchanged.
   style.css only corrects this at <=480px, so the whole 481-991px
   tablet range was left overflowing. Selector must be as specific
   as the original (.Single-Service-Page .Quick-Contact = 0,2,0). */
.Single-Service-Page .Quick-Contact,
.Quick-Contact {
  box-sizing: border-box;
  max-width: 100%;
}
@media (max-width: 991px) {
  .Single-Service-Page .Quick-Contact,
  .Quick-Contact {
    /* display:table cannot shrink below its min-content width, and the
       long address/email strings forced it wider than the column.
       block + wrapping lets it respect the container. */
    display: block;
    width: 100%;
    margin-left: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .Single-Service-Page .Quick-Contact .Info p,
  .Quick-Contact .Info p { overflow-wrap: break-word; word-wrap: break-word; }
}

/* ---------- 6c. SERVICE-PAGE CONTENT HEADING ------------------
   Service pages carried TWO <h1> with identical text (banner +
   content). The content one was demoted to <h2> so each page has
   exactly one H1; these rules reproduce the old <h1> appearance
   pixel-for-pixel so the design is unchanged.
   Original computed: 34px / Oswald 600 / rgb(44,44,44) / lh 35px. */
.Service-Content-Main .heding-Box h2 {
  font-size: 34px;
  font-weight: 600;
  color: rgb(44, 44, 44);
  line-height: 35px;
  margin: 0;
  letter-spacing: normal;
}
@media (max-width: 767px) {
  .Service-Content-Main .heding-Box h2 { font-size: 24px; line-height: 1.3; }
}

/* ---------- 7. TABLET ----------------------------------------- */
@media (max-width: 991px) {
  .heding-Box h2,
  .Choose-Section h2,
  .Testimonial h2,
  .mission h2 { font-size: 26px; }
  .Facility-Main { margin-bottom: 26px; }
}

/* ---------- 8. MOBILE ----------------------------------------
   h2 was still 30px at 375px, and .mission kept its full 85px
   desktop padding while every other section had already dropped
   to ~35-40px. Both corrected here. */
@media (max-width: 767px) {
  .heding-Box h2,
  .Choose-Section h2,
  .Testimonial h2,
  .mission h2 {
    font-size: 23px;
    line-height: 1.3;
    margin-bottom: 12px;
  }
  .heding-Box h4 { font-size: 13px; letter-spacing: 1.6px; }
  .heding-Box h5 { font-size: 16px; }

  .mission { padding-top: 45px; padding-bottom: 45px; }

  .About-Home p,
  .Choose-Section p,
  .mission p,
  .Facility-Content .details { font-size: 15.5px; line-height: 1.72; }

  .Facility-Content { padding: 24px 18px 20px; }
  .Facility-Content .title { font-size: 18px; }
  .Facility-Main { margin-bottom: 24px; }

  /* comfortable tap targets */
  .btn-one, .btn-two { padding: 12px 22px; display: inline-block; }
}

@media (max-width: 480px) {
  .heding-Box h2,
  .Choose-Section h2,
  .Testimonial h2,
  .mission h2 { font-size: 21px; }
}

/* ---------- 9. SERVICE PAGE CTA + FAQ (added 2026-08-01) ------
   Conversion blocks appended to the six service pages. Brand
   palette only (#50311c / #983d20 / #3b2414); no new colours. */
.svc-cta {
  background: linear-gradient(135deg, #50311c 0%, #6d4227 100%);
  border-radius: 6px; padding: 30px 30px 24px; margin: 40px 0 34px; color: #fff;
}
.svc-cta h3 { font-family: 'Oswald', sans-serif; color: #fff; margin: 0 0 10px; font-size: 24px; line-height: 1.3; }
.svc-cta p { color: #e8dbd2; margin: 0 0 20px; font-size: 15.5px; line-height: 1.7; }
.svc-btn {
  display: inline-block; background: #983d20; color: #fff !important;
  padding: 11px 22px; border-radius: 3px; text-decoration: none;
  font-weight: 600; letter-spacing: .4px; margin: 0 8px 10px 0; font-size: 14.5px;
  transition: background-color .2s ease, transform .15s ease;
}
.svc-btn:hover { background: #b4491f; transform: translateY(-1px); color: #fff !important; }
.svc-btn.alt { background: #25d366; } .svc-btn.alt:hover { background: #1fb457; }
.svc-btn.ghost { background: transparent; border: 1px solid #d6b9a6; }
.svc-btn.ghost:hover { background: rgba(255,255,255,.12); }

.svc-faq { margin: 34px 0; }
.svc-faq h2 {
  font-family: 'Oswald', sans-serif; font-size: 26px; color: #50311c;
  margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid #f0e7e0;
}
.svc-faq-item { border: 1px solid #ece4dd; border-radius: 5px; padding: 18px 20px; margin-bottom: 12px; background: #fff; }
.svc-faq-item h3 {
  margin: 0 0 8px; font-size: 16.5px; color: #50311c; font-weight: 600;
  font-family: 'Open Sans', sans-serif; line-height: 1.45;
}
.svc-faq-item h3 i { color: #983d20; margin-right: 7px; }
.svc-faq-item p { margin: 0; color: #5a5a5a; font-size: 15.5px; line-height: 1.75; }

.svc-areas { background: #faf7f4; border: 1px solid #eee3da; border-radius: 5px; padding: 20px 22px; margin: 30px 0 10px; }
.svc-areas h4 {
  font-family: 'Oswald', sans-serif; font-size: 17px; color: #50311c;
  margin: 0 0 12px; text-transform: uppercase; letter-spacing: .6px;
}
.svc-areas ul { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 26px; }
.svc-areas li { padding: 6px 0; }
.svc-areas a { color: #4a4a4a; text-decoration: none; font-size: 15px; }
.svc-areas a:hover { color: #983d20; }
.svc-areas i { color: #983d20; margin-right: 7px; }

@media (max-width: 767px) {
  .svc-cta { padding: 24px 20px 18px; margin: 30px 0 26px; }
  .svc-cta h3 { font-size: 20px; }
  .svc-btn { display: block; text-align: center; margin-right: 0; }
  .svc-faq h2 { font-size: 21px; }
  .svc-faq-item { padding: 15px 16px; }
  .svc-areas ul { column-count: 1; }
}

/* ---------- 10. CONTACT PAGE TRUST + WHATSAPP (2026-08-01) ----
   Conversion blocks on Enquiry.php. Approved facts only. */
.c-wa { margin: 14px 0 4px; }
.c-wa a {
  display: inline-block; background: #25d366; color: #fff !important;
  padding: 11px 22px; border-radius: 3px; text-decoration: none;
  font-weight: 600; letter-spacing: .3px; font-size: 15px;
  transition: background-color .2s ease, transform .15s ease;
}
.c-wa a:hover { background: #1fb457; transform: translateY(-1px); color: #fff !important; }

.c-trust { list-style: none; margin: 22px 0 16px; padding: 0; }
.c-trust li {
  position: relative; padding: 7px 0 7px 28px;
  font-size: 15px; line-height: 1.6; color: inherit;
}
.c-trust i { position: absolute; left: 0; top: 11px; color: #25d366; font-size: 14px; }

.c-next { font-size: 14.5px; line-height: 1.7; opacity: .92; margin: 6px 0 0; }

/* testimonial provenance note */
.testi-note { font-size: 13.5px; color: #8a8a8a; font-style: italic; margin: -6px 0 18px; }

@media (max-width: 767px) {
  .c-wa a { display: block; text-align: center; }
  .c-trust li { font-size: 14.5px; padding-left: 26px; }
  .c-next { font-size: 14px; }
}

/* ---------- 11. (removed 2026-08-02) --------------------------
   The service-sidebar icon workaround (.Points .Icon img{height:auto})
   is no longer needed: the malformed class="img-responsive;" was
   corrected at source in all 7 templates, so Bootstrap's own
   .img-responsive{height:auto} now applies. */

/* ---------- 12. FIX: Enquiry trust section layout (2026-08-01) -----
   .Contact-Section .C-Head-Box .fa (0,3,0) gave EVERY icon a maroon
   100x90 block, and .Contact-Section .C-Head-Box a (0,3,0) made every
   link display:table;float:right. Those were written for the single
   pencil icon and single call button, but they also captured the
   trust list and WhatsApp button, causing the overlap and clipping.
   These selectors are (0,4,1)/(0,4,0) so they win cleanly. */
.Contact-Section .C-Head-Box .c-trust li i.fa {
  background: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1;
  position: absolute;
  left: 0;
  top: 10px;
  width: auto;
  height: auto;
  display: inline-block;
  color: #25d366;
}
.Contact-Section .C-Head-Box .c-wa a {
  display: inline-block;
  float: none;
  width: auto;
  text-align: center;
}
/* keep each block on its own line so the floated phone button cannot
   collide with the WhatsApp button or the trust list */
.Contact-Section .C-Head-Box .Cll-Btn,
.Contact-Section .C-Head-Box .c-wa,
.Contact-Section .C-Head-Box .c-trust,
.Contact-Section .C-Head-Box .c-next {
  clear: both;
  overflow: hidden;
}
.Contact-Section .C-Head-Box .c-trust { margin: 20px 0 14px; }
.Contact-Section .C-Head-Box .c-trust li {
  position: relative;
  padding: 7px 0 7px 26px;
  min-height: 0;
  overflow: visible;
}

@media (max-width: 767px) {
  .Contact-Section .C-Head-Box .c-wa a { display: block; width: 100%; }
  .Contact-Section .C-Head-Box .c-trust li { padding-left: 24px; font-size: 14.5px; }
}

/* ---------- 12b. Enquiry CTA alignment polish (2026-08-01) --------
   "Message on WhatsApp" was wrapping to three lines inside its box
   (168x114) and the phone button was floated right while every other
   element in the panel is left aligned. Keep both on one line and
   align them with the surrounding copy. */
.Contact-Section .C-Head-Box .c-wa a {
  white-space: nowrap;
}
.Contact-Section .C-Head-Box .Cll-Btn,
.Contact-Section .C-Head-Box .c-wa {
  text-align: left;
}
.Contact-Section .C-Head-Box .Cll-Btn a {
  float: none;
  display: inline-block;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .Contact-Section .C-Head-Box .c-wa a,
  .Contact-Section .C-Head-Box .Cll-Btn a { display: block; width: 100%; text-align: center; }
}

/* ---------- 12c. Enquiry: reset icons INSIDE the CTA buttons -------
   .Contact-Section .C-Head-Box .fa gives every icon a maroon block
   with font-size:30px and padding:30px 35px. That is right for the
   standalone pencil icon, but inside the WhatsApp button it rendered
   a ~90px tall block, inflating the button to 168x114. Reset it. */
.Contact-Section .C-Head-Box .c-wa a .fa {
  background: none;
  background-color: transparent;
  padding: 0;
  margin: 0 8px 0 0;
  font-size: 15px;
  line-height: 1;
  position: static;
  display: inline;
  color: #fff;
}