/* ---- Custom brand tweaks ---- */

/* Make the blue TirupurBrands logo render white (works for the transparent
   PNG since it recolors any non-transparent pixel to solid white) */
img[src*="tirupurbrands-logo.png"] {
  filter: brightness(0) invert(1);
}

/* ---- Fixes for content that depended on the funnel-builder JS runtime ---- */

/* Guarantee fade-in headings are visible even if the entrance-animation
   JS never runs (page still looks correct, just without the fade). */
[data-animation-class="animate__animated animate__fadeInUp"] {
  opacity: 1 !important;
}

/* Video thumbnails: baked-in background image, clear affordance to click */
.zrm-video-thumb {
  width: 100%;
  height: 100%;
  background-size: cover !important;
  background-repeat: no-repeat;
}

.zrm-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.zrm-play-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #ffffff;
}

figure[data-video-id]:hover .zrm-play-btn {
  background: rgba(233, 61, 61, 0.85);
}

/* FAQ accordion: JS toggles a .zrm-open class instead of relying on
   the funnel-builder's Vue click handlers */
.hl-faq-child-panel {
  overflow: hidden;
  transition: height .25s ease, padding .25s ease, opacity .2s ease;
}

.hl-faq-child-panel.zrm-open {
  height: auto !important;
  padding: 0 15px 15px !important;
  opacity: 1 !important;
}

.hl-faq-child-heading {
  cursor: pointer;
}

.hl-faq-child-heading .hl-faq-child-heading-icon.zrm-rotated {
  transform: rotate(180deg);
  transition: transform .2s ease;
}

/* ---- Webinar Takeaways intro + WhatsApp CTA ---- */
.zrm-webinar-intro {
  max-width: 760px;
  margin: 0 auto 32px;
  padding: 0 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.zrm-webinar-intro-text {
  color: var(--white, #fff);
  font-family: 'customhl-699bf17bee45e711d3ed0f90-Nexa Book Regular', var(--contentfont), sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

.zrm-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25D366;
  color: #04240f;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  white-space: nowrap;
}

.zrm-whatsapp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45);
}

@media (max-width: 768px) {
  .zrm-webinar-intro {
    padding: 0 12px;
    margin-bottom: 24px;
    gap: 14px;
  }
  .zrm-webinar-intro-text {
    font-size: 16px;
  }
  .zrm-whatsapp-btn {
    width: 100%;
    font-size: 15px;
    padding: 13px 20px;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .zrm-webinar-intro-text {
    font-size: 15px;
    line-height: 1.55;
  }
  .zrm-whatsapp-btn {
    font-size: 14px;
    padding: 12px 16px;
  }
}

/* =========================================================
   Responsive safety layer — desktop (1025px+) intentionally untouched
   ========================================================= */
@media (max-width: 1024px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  *, *::before, *::after { box-sizing: border-box; }

  /* Keep builder wrappers inside the viewport without changing their look */
  #preview-container,
  .preview-container,
  .fullSection,
  .c-section,
  .c-row,
  .c-column,
  .c-wrapper,
  .inner,
  .vertical.inner { max-width: 100% !important; }

  .c-row > .inner,
  .fullSection > .inner,
  .c-section > .inner {
    width: min(100%, 1170px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  img, video, svg, canvas { max-width: 100%; height: auto; }
  iframe { max-width: 100%; }

  /* Prevent long Tamil/English strings and buttons from creating overflow */
  .text-output, .text-output *,
  .c-heading, .c-sub-heading, .c-paragraph,
  .c-button, .c-button a {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .cbutton-ZJLonGZYuq,
  [class*="cbutton-"] {
    white-space: normal !important;
  }

  /* Builder rows occasionally retain desktop min-widths */
  [class*="col-"], [class*="row-"] { min-width: 0 !important; }
}

/* Tablet: preserve the desktop visual language, only fit spacing/type to screen */
@media (min-width: 481px) and (max-width: 1024px) {
  .c-row > .inner,
  .fullSection > .inner,
  .c-section > .inner { padding-left: 24px !important; padding-right: 24px !important; }

  h1 { font-size: clamp(38px, 5.2vw, 58px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(28px, 3.8vw, 42px); }
  h3 { font-size: clamp(22px, 3vw, 32px); }

  .zrm-play-btn { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
}

/* Mobile */
@media (max-width: 480px) {
  .c-row > .inner,
  .fullSection > .inner,
  .c-section > .inner { padding-left: 16px !important; padding-right: 16px !important; }

  h1 { font-size: clamp(30px, 9.2vw, 42px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(24px, 7.2vw, 34px); line-height: 1.15; }
  h3 { font-size: clamp(20px, 6vw, 28px); line-height: 1.2; }
  p { max-width: 100%; }

  /* Stack any desktop flex row that would otherwise squeeze content */
  .c-row > .inner { gap: 16px; }

  [class*="cbutton-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .zrm-play-btn { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .zrm-play-btn::after { border-width: 11px 0 11px 18px; }
}

/* ---- Success Stories: portrait testimonial video layout ---- */
#section-tGWgkzKJB4 #row-eHGcCR6Gt5 > .inner {
  /* max-width: 940px !important; */
  margin: 0 auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 24px !important;
}
#section-tGWgkzKJB4 #row-eHGcCR6Gt5 .c-column {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 290px !important;
}
#section-tGWgkzKJB4 #row-eHGcCR6Gt5 .video-container {
  width: 100% !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #000 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
#section-tGWgkzKJB4 #row-eHGcCR6Gt5 .zrm-video-thumb {
  height: 100% !important;
  padding-bottom: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
}
#section-tGWgkzKJB4 #row-eHGcCR6Gt5 .video-container video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}
@media (max-width: 767px) {
  #section-tGWgkzKJB4 #row-eHGcCR6Gt5 > .inner {
    flex-direction: column !important;
    align-items: center !important;
    gap: 22px !important;
  }
  #section-tGWgkzKJB4 #row-eHGcCR6Gt5 .c-column {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    flex: 0 0 auto !important;
  }
}

/* Testimonial video lime border */
#section-tGWgkzKJB4 #row-eHGcCR6Gt5 .video-container {
  border: 3px solid #CFFF04 !important;
  box-sizing: border-box !important;
}