/* ============================================================
   PHEMIGHT TECHNOLOGIES — Master Theme CSS v4
   Last updated: full audit pass
   ============================================================ */

/* ── 1. GLOBAL OVERFLOW FIX (prevents horizontal scroll) ── */
html, body {
  overflow-x: hidden;
  width: 100%;
}
*, *::before, *::after {
  box-sizing: border-box;
}
img, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── 2. CSS CUSTOM PROPERTIES ───────────────────────────── */
:root {
  --pt-dark:    #1A0E05;
  --pt-mid:     #3D2006;
  --pt-light:   #7A4019;
  --pt-gold:    #D4A853;
  --pt-hover:   #b8872a;
  --pt-cream:   #FDF8F0;
  --pt-cream2:  #F8F2EA;
}

/* ── 3. COLOUR OVERRIDES ────────────────────────────────── */
.dark-bg,
.aximo-header-section.dark-bg,
.aximo-footer-section.dark-bg,
.aximo-hero-section.dark-bg {
  background-color: var(--pt-dark) !important;
}
.aximo-breadcrumb        { background-color: #2C1610; }
.aximo-auto-slider-section { background-color: var(--pt-gold); }
.aximo-auto-slider-section h3 { color: var(--pt-dark); }
.aximo-counter-number    { color: var(--pt-gold); }
.aximo-story-content h3  { color: var(--pt-mid); }
.aximo-accordion-item.open .aximo-accordion-header h3 { color: var(--pt-gold); }

/* ── 4. BUTTONS ─────────────────────────────────────────── */
.aximo-default-btn,
.aximo-default-btn:focus,
#aximo-submit-btn,
#aximo-main-btn {
  background-color: var(--pt-gold) !important;
  border-color:     var(--pt-gold) !important;
  color:            var(--pt-dark) !important;
}
.aximo-default-btn:hover,
#aximo-submit-btn:hover,
#aximo-main-btn:hover {
  background-color: var(--pt-hover) !important;
  border-color:     var(--pt-hover) !important;
  color: #fff !important;
}
.aximo-call-btn {
  background-color: var(--pt-gold);
  border-color:     var(--pt-gold);
  color:            var(--pt-dark);
  display:          inline-flex;
  align-items:      center;
  gap:              8px;
  flex-wrap:        wrap;
}
.aximo-call-btn:hover {
  background-color: var(--pt-hover);
  color: #fff;
}
.pt-svc-btn { margin-top: 16px; display: inline-block; }
.pt-svc-cta { margin-top: 32px; display: inline-block; }

/* ── 5. LINKS & NAV ─────────────────────────────────────── */
.aximo-footer-section a              { color: var(--pt-gold); }
.aximo-footer-section a:hover        { color: #e8c47a; }
.post-read-more                      { color: var(--pt-mid); font-weight: 600; }
.post-read-more:hover                { color: var(--pt-gold); }
.aximo-preloader div                 { border-color: var(--pt-gold) transparent transparent transparent; }
.aximo-social-icon a:hover           { background-color: var(--pt-gold) !important; border-color: var(--pt-gold) !important; color: var(--pt-dark) !important; }
.site-menu-main > .nav-item > .nav-link-item:hover,
.site-menu-main > .nav-item.active > .nav-link-item { color: var(--pt-gold) !important; }

/* Footer logo sizing */
.aximo-footer-logo img {
  max-width: 180px;
  width: 100%;
  height: auto;
}

/* ── 6. EMAIL — break long addresses on all screens ─────── */
.pt-email-link,
.aximo-info a[href^="mailto"],
.pt-contact-list a[href^="mailto"],
.pt-sidebar-contact a[href^="mailto"] {
  word-break:      break-all;
  overflow-wrap:   break-word;
  hyphens:         none;
  display:         inline-block;
  max-width:       100%;
}

/* ── 7. HERO SECTION ────────────────────────────────────── */
/* Override absolute positioning that causes overflow */
.aximo-hero-thumb {
  position: static !important;
  right: auto !important;
  max-width: 100% !important;
  border-radius: 16px;
  overflow: hidden;
}
.aximo-hero-thumb img {
  width: 100%;
  height: auto;
  transform: none !important;
  transition: transform 0.5s;
}
.aximo-hero-thumb img:hover {
  transform: scale(1.03) !important;
}
/* Column that holds the hero image */
.pt-hero-thumb-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Hero user thumb images */
.aximo-hero-user-thumb-item {
  width:         56px !important;
  height:        56px !important;
  border-radius: 50%;
  border:        3px solid var(--pt-gold) !important;
  overflow:      hidden;
  flex-shrink:   0;
}
.aximo-hero-user-thumb-item:nth-child(2) { left: -8px !important; }
.aximo-hero-user-thumb-item:nth-child(3) { left: -16px !important; }
.aximo-hero-user-thumb-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* ── 8. ICON TESTIMONIALS ───────────────────────────────── */
.aximo-testimonial-author-thumb { display: none !important; }
.pt-author-icon {
  width:         56px;
  height:        56px;
  border-radius: 50%;
  background:    var(--pt-gold);
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  margin-right:  14px;
}
.pt-author-icon i {
  font-size: 24px;
  color: var(--pt-dark);
}

/* ── 9. SERVICE PAGES ───────────────────────────────────── */
.pt-svc-img {
  width:         100%;
  height:        340px;
  object-fit:    cover;
  border-radius: 12px;
  margin:        24px 0;
}
.pt-svc-tagline {
  font-size:   1.1rem;
  line-height: 1.7;
  color:       var(--pt-mid);
  font-weight: 500;
  margin:      16px 0;
}
.pt-svc-body h4 {
  font-size:    1.1rem;
  font-weight:  700;
  color:        var(--pt-mid);
  margin:       2rem 0 0.6rem;
}
.pt-svc-body p {
  line-height:    1.8;
  margin-bottom:  1rem;
}
.pt-sidebar {
  position: sticky;
  top: 100px;
}
.pt-sidebar-box {
  background:    var(--pt-cream);
  padding:       28px 24px;
  border-radius: 10px;
  border-left:   4px solid var(--pt-gold);
  margin-bottom: 24px;
}
.pt-sidebar-box h4 {
  color:         var(--pt-mid);
  font-size:     1rem;
  font-weight:   700;
  margin-bottom: 16px;
}
.pt-sidebar-list {
  list-style: none;
  padding:    0;
  margin:     0;
}
.pt-sidebar-list li {
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding:       10px 0;
}
.pt-sidebar-list li:last-child { border-bottom: none; }
.pt-sidebar-list a {
  color:       var(--pt-mid);
  text-decoration: none;
  font-weight: 500;
  display:     block;
  transition:  all .2s;
}
.pt-sidebar-list a:hover {
  color:        var(--pt-gold);
  padding-left: 6px;
}
.pt-contact-list {
  list-style: none;
  padding:    0;
  margin:     12px 0;
}
.pt-contact-list li {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  margin-bottom: 10px;
  font-size:     .9rem;
}
.pt-contact-list i {
  color:      var(--pt-gold);
  margin-top: 3px;
  flex-shrink: 0;
}
.pt-contact-list a,
.pt-contact-list span {
  color:        var(--pt-mid);
  text-decoration: none;
  word-break:   break-word;
}
.pt-contact-list a:hover { color: var(--pt-gold); }

/* ── 10. CONTACT PAGE ───────────────────────────────────── */
.pt-contact-info-section {
  padding:    80px 0;
  background: var(--pt-cream);
}
.pt-contact-info-section .aximo-contact-info-title { margin-bottom: 48px; }
.pt-contact-info-section .aximo-contact-info-box,
.pt-contact-info-section .aximo-contact-info-box a,
.pt-contact-info-section .aximo-contact-info-box p,
.pt-contact-info-section .aximo-contact-info-box h5 {
  color: var(--pt-mid) !important;
}
.aximo-contact-info-data span { color: var(--pt-gold); font-weight: 700; display: block; font-size:.85rem; text-transform: uppercase; letter-spacing:.05em; }
.aximo-contact-info-data h5  { margin: 4px 0 6px; font-size: 1rem; }
.aximo-contact-info-data p   { margin: 0; font-size: .9rem; word-break: break-word; }
.aximo-contact-info-box      { padding: 28px 24px; border-radius: 10px; background: #fff; box-shadow: 0 2px 20px rgba(0,0,0,.06); transition: box-shadow .3s; }
.aximo-contact-info-box:hover { box-shadow: 0 4px 30px rgba(0,0,0,.12); }
.aximo-contact-info-icon     { width:56px;height:56px;background:var(--pt-cream);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px; }
.aximo-contact-info-icon img { width:28px;height:28px; }
.pt-contact-info-section .aximo-contact-info-icon img {
  filter: brightness(0);
}
.pt-map-section { padding: 60px 0; }

/* 11. Mobile button responsiveness for service/blog submenu pages */
@media (max-width: 767px) {
  .aximo-header-btn,
  .aximo-default-btn,
  .aximo-call-btn,
  .pt-svc-btn,
  .pt-svc-cta,
  #aximo-main-btn,
  #aximo-submit-btn,
  .aximo-form-wrap button,
  .aximo-main-form button {
    width: 100% !important;
    min-height: 48px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
    padding: 12px 14px !important;
  }

  .header-btn.header-btn-l1 {
    width: 100%;
  }
}
.pt-map-section .aximo-map-wrap iframe { width:100%;height:420px;border:0;border-radius:10px; }

/* ── 11. BLOG POST ──────────────────────────────────────── */
.pt-single-post { padding-top: 8px; }
.pt-post-meta   { display:flex;gap:12px;align-items:center;margin:20px 0 12px; }
.pt-post-cat    { display:inline-block;background:var(--pt-gold);color:var(--pt-dark);font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em; }
.pt-post-date   { font-size:.85rem;color:#666; }
.pt-post-title  { font-size:clamp(1.3rem,3vw,1.9rem);line-height:1.35;margin-bottom:24px; }
.pt-post-body h4 { font-size:1.1rem;font-weight:700;color:var(--pt-mid);margin:1.8rem 0 .6rem; }
.pt-post-body p  { line-height:1.8;margin-bottom:1.1rem; }
.pt-post-body a  { color:var(--pt-gold);text-decoration:underline; }
.pt-post-footer  { margin-top:40px;padding-top:24px;border-top:1px solid #e5e5e5; }

/* ── 12. SIDEBAR ────────────────────────────────────────── */
.right-sidebar { margin-top: 0; }
.pt-sidebar-contact {
  list-style: none;
  padding:    0;
  margin:     12px 0;
}
.pt-sidebar-contact li {
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
  margin-bottom: 10px;
  font-size:     .9rem;
}
.pt-sidebar-contact i     { color: var(--pt-gold); flex-shrink: 0; margin-top: 3px; }
.pt-sidebar-contact a     { color: var(--pt-mid); text-decoration: none; word-break: break-all; }
.pt-sidebar-contact a:hover { color: var(--pt-gold); }

/* ── 13. FOOTER ─────────────────────────────────────────── */
.aximo-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 24px 0; }
.aximo-copywright p  { margin:0; font-size:.9rem; color:rgba(255,255,255,.7); }
@media (min-width:992px) { .aximo-copywright.one { text-align:right; } }
.aximo-info a[href^="mailto"] { font-size:.875rem; }

/* ── 14. CONTACT FORM IMAGE ─────────────────────────────── */
.pt-contact-img-col { display:flex; align-items:center; justify-content:center; padding-top:20px; }
.aximo-contact-thumb img { max-width:100%; height:auto; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════ */

/* ─ 1400px ─ */
@media (max-width:1400px) {
  .pt-hero-thumb-col .aximo-hero-thumb { max-width: 420px; }
}

/* ─ 1200px ─ */
@media (max-width:1200px) {
  .aximo-hero-content h1 { font-size: clamp(2rem,4.5vw,3rem); }
  .pt-hero-thumb-col .aximo-hero-thumb { max-width: 380px; }
  .pt-sidebar { position: static; }
}

/* ─ 992px – tablet landscape ─ */
@media (max-width:992px) {
  /* Hero: stack vertically, show image below text */
  .aximo-hero-section .col-lg-7,
  .aximo-hero-section .col-lg-5 { width: 100%; }
  .pt-hero-thumb-col {
    display:    flex !important;
    justify-content: center;
    margin-top: 40px;
  }
  .pt-hero-thumb-col .aximo-hero-thumb {
    max-width:  360px;
    width:      100%;
  }
  .aximo-hero-content { text-align: center; }
  .aximo-hero-user-wrap { justify-content: center; }
  .aximo-hero-shape { display: none !important; }

  /* Counter */
  .aximo-counter-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
  }
  .aximo-counter-data { padding: 16px; background: rgba(255,255,255,.04); border-radius: 8px; }

  /* Service page sidebar below content */
  .pt-sidebar { margin-top: 40px; }

  /* Contact image below form on tablet */
  .pt-contact-img-col { display: block; margin-top: 32px; }

  /* Footer columns */
  .aximo-footer-top .col-lg-7,
  .aximo-footer-top .col-lg-5 { width: 100%; }

  /* Section offsets */
  .offset-lg-1 { margin-left: 0 !important; }

  /* Map */
  .pt-map-section .aximo-map-wrap iframe { height: 320px; }
}

/* ─ 768px – tablet portrait ─ */
@media (max-width:768px) {
  h1, .aximo-hero-content h1 { font-size: clamp(1.6rem,7vw,2.4rem); }
  h2 { font-size: clamp(1.3rem,5.5vw,1.9rem); }
  h3 { font-size: clamp(1rem,4vw,1.3rem); }

  .container { padding-left: 16px; padding-right: 16px; }

  /* Breadcrumb */
  .aximo-breadcrumb { padding: 40px 0; }
  .post__title { font-size: clamp(1.2rem,5.5vw,1.7rem); }

  /* Iconboxes */
  .aximo-iconbox-wrap { padding: 22px 18px; margin-bottom: 20px; }

  /* Service page image */
  .pt-svc-img { height: 220px; }

  /* Project thumbs */
  .aximo-project-thumb img { height: 200px; object-fit: cover; width: 100%; }

  /* Teams */
  .aximo-team-wrap { margin-bottom: 20px; }

  /* Blog thumbnails */
  .post-thumbnail img { width: 100%; height: 220px; object-fit: cover; }

  /* Blog sidebar stacks below */
  .right-sidebar { margin-top: 48px; }

  /* Map */
  .pt-map-section .aximo-map-wrap iframe { height: 260px; }

  /* Contact info section */
  .pt-contact-info-section { padding: 60px 0; }

  /* CTA call button */
  .aximo-call-btn {
    width:           100%;
    justify-content: center;
    text-align:      center;
    margin-top:      8px;
  }

  /* Footer copyright */
  .aximo-copywright.one { text-align: center; margin-top: 8px; }
  .aximo-footer-logo    { display: flex; justify-content: center; }
  .aximo-footer-logo img { max-width: 150px; }

  /* Hide header CTA button */
  .aximo-header-btn { display: none !important; }

  /* Service sidebar box */
  .pt-sidebar-box { padding: 20px 16px; }

  /* Testimonials */
  .aximo-testimonial-wrap { padding: 22px 18px; }
}

/* ─ 576px – mobile ─ */
@media (max-width:576px) {
  .container { padding-left: 14px; padding-right: 14px; }

  h1, .aximo-hero-content h1 { font-size: clamp(1.4rem,8.5vw,2rem); }
  h2 { font-size: clamp(1.15rem,6vw,1.6rem); }

  /* Hero thumb smaller on mobile */
  .pt-hero-thumb-col .aximo-hero-thumb { max-width: 280px; }

  /* Counter: 3 col grid */
  .aximo-counter-wrap { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .aximo-counter-data { padding: 12px 8px; text-align: center; }
  .aximo-counter-number { font-size: 1.6rem; }

  /* Ticker */
  .aximo-auto-slider-item h3 { font-size: .9rem; white-space: nowrap; }

  /* Service page image */
  .pt-svc-img { height: 180px; }

  /* Blog entry titles */
  .entry-title { font-size: 1rem; }

  /* Contact info email */
  .aximo-contact-info-data p,
  .pt-email-link { font-size: .82rem; word-break: break-all; overflow-wrap: anywhere; }

  /* Footer email */
  .aximo-info a[href^="mailto"] { font-size: .8rem; word-break: break-all; }

  /* Post title */
  .pt-post-title { font-size: 1.2rem; }

  /* Map */
  .pt-map-section .aximo-map-wrap iframe { height: 220px; }

  /* Portfolio single column */
  .aximo-project-thumb img { height: 180px; }
}

/* ─ 420px – very small ─ */
@media (max-width:420px) {
  h1, .aximo-hero-content h1 { font-size: 1.3rem; }
  .aximo-default-btn { font-size: .82rem; padding: 10px 16px; }
  .aximo-counter-number { font-size: 1.4rem; }
  .pt-svc-img { height: 150px; }
}

/* ============================================================
   CRITICAL VISIBILITY FIX
   WOW.js sets visibility:hidden on .wow elements waiting to animate.
   If JS is delayed or the scroll trigger doesn't fire, elements stay
   invisible. This fallback ensures all content is always visible.
   ============================================================ */

/* Force all wow-animated elements visible after 2 seconds via animation */
.wow {
  visibility: visible !important;
  animation-fill-mode: both;
}

/* Ensure these key content blocks are never hidden */
.aximo-iconbox-wrap,
.aximo-testimonial-wrap,
.aximo-team-wrap,
.aximo-project-thumb,
.aximo-story-thumb,
.aximo-accordion-wrap,
.aximo-video-wrap,
.aximo-counter-wrap,
.single-post-item,
.pt-single-post,
.pt-svc-content,
.aximo-contact-info-box {
  visibility: visible !important;
  opacity: 1;
}

/* Title animation - ensure text is always readable even without GSAP */
.aximo-title-animation {
  display: inline;
}

/* Section titles always visible */
.aximo-section-title,
.aximo-section-title h2,
.aximo-default-content h2,
.aximo-breadcrumb h1,
.post__title {
  visibility: visible !important;
  opacity: 1;
}


/* ============================================================
   WOW.JS VISIBILITY FIX — v2
   WOW.js sets visibility:hidden on .wow elements before they
   scroll into view and animate. This causes sections to appear
   completely blank on page load, especially on mobile/tablet.

   The correct fix is two-part:
   1. CSS: force .wow visible so nothing is ever permanently hidden
   2. JS: WOW is already initialised with mobile:true so it fires

   The animation still plays — WOW adds .animated class and sets
   the specific animation-name. We just ensure the fallback is
   always visible even if the trigger never fires.
   ============================================================ */

/* Force all WOW elements to be visible regardless of JS state */
.wow {
  visibility: visible !important;
}

/* Attribute selector catches WOW's inline style injection */
[class~="wow"][style*="visibility"] {
  visibility: visible !important;
}

/* Ensure .animated elements (WOW-triggered) are always visible */
.animated {
  visibility: visible !important;
}