/**
 * Hero Video Elementor Widget - Master Stylesheet (Version 2.1.0)
 *
 * Clean, transparent-by-default architecture with zero distracting background clutter:
 * - Completely transparent hero container with no baked-in farm images or ghost text
 * - Standalone isolated transparent PNG medicine bottles cutout
 * - Clean two-line bold Tamil headline and unboxed sub-headline
 * - 4 circular highlight badges with green icons and dark text
 * - Top-right floating green badge: "மருந்தை எப்படி கலந்து வழங்குவது?"
 * - Video player with center play button and custom controls bar
 * - Bottom white 3-step card separated by green double-chevrons (>>)
 * - Responsive Desktop, Tablet, and Mobile layouts
 *
 * @package KRM_Enterprises
 * @version 2.1.0
 */

@import url('https://fonts.googleapis.com/css2?family=Mukta+Malar:wght@400;500;600;700;800&family=Noto+Sans+Tamil:wght@400;500;600;700;800;900&family=Outfit:wght@600;700;800;900&display=swap');

/* ==========================================================================
   1. MASTER CONTAINER & HERO CARD (CLEAN & TRANSPARENT BY DEFAULT)
   ========================================================================== */

.krm-hero-video-wrap {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 16px 20px !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: visible !important;
}

.krm-hero-video-card {
  position: relative !important;
  width: 100% !important;
  border-radius: 20px;
  overflow: hidden !important;
  background-color: transparent; /* Transparent by default for zero clutter */
  box-sizing: border-box !important;
  padding: 18px 24px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
}

/* Background Overlay Layer (Managed exclusively via Elementor Style Tab) */
.krm-hero-video-bg-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background: transparent;
}

/* ==========================================================================
   2. TOP ROW: LEFT CONTENT + CENTER BOTTLES + RIGHT VIDEO
   ========================================================================== */

.krm-hero-top-row {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 2.1 LEFT COLUMN */
.krm-hero-left-col {
  flex: 0 0 34% !important;
  max-width: 34% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

/* Forest Green Brand Logo Badge */
.krm-hero-logo-box {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 2px !important;
}

.krm-brand-logo-img {
  max-width: 215px !important;
  height: auto !important;
  display: block !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.16));
}

.krm-forest-logo-badge {
  display: inline-block !important;
  position: relative !important;
  filter: drop-shadow(0 6px 12px rgba(6, 78, 59, 0.35)) !important;
}

.krm-forest-logo-oval {
  background: linear-gradient(135deg, #064e3b 0%, #022c22 100%) !important;
  border: 3px solid #facc15 !important;
  border-radius: 999px !important;
  padding: 8px 34px 15px 34px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.25) !important;
}

.krm-logo-krm-text {
  font-family: 'Outfit', 'Arial Black', sans-serif !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  letter-spacing: 2px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.krm-logo-hm-ribbon {
  position: absolute !important;
  bottom: -11px !important;
  background: linear-gradient(180deg, #fef08a 0%, #facc15 100%) !important;
  border: 1.5px solid #ca8a04 !important;
  border-radius: 6px !important;
  padding: 3px 14px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Headline & Sub-Headline */
.krm-hero-headline-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.krm-hero-main-title {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.krm-hero-title-line {
  font-family: 'Noto Sans Tamil', 'Mukta Malar', sans-serif !important;
  font-size: clamp(30px, 2.9vw, 42px) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  color: #0b3b24 !important;
  letter-spacing: -0.4px !important;
  white-space: nowrap !important;
}

.krm-hero-subheadline {
  font-family: 'Noto Sans Tamil', 'Mukta Malar', sans-serif !important;
  font-size: clamp(14px, 1.25vw, 17.5px) !important;
  font-weight: 700 !important;
  color: #15803d !important;
  line-height: 1.35 !important;
  margin: 2px 0 0 0 !important;
}

/* 4 Circular Highlight Cards (In a row) */
.krm-highlights-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 4px !important;
}

.krm-highlight-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.krm-highlight-circle-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1.5px solid #d1fae5 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(6, 78, 59, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #059669 !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.krm-highlight-card:hover .krm-highlight-circle-icon {
  transform: translateY(-2px) scale(1.08) !important;
  box-shadow: 0 6px 14px rgba(5, 150, 105, 0.2) !important;
  border-color: #10b981 !important;
}

.krm-highlight-circle-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
}

.krm-highlight-title {
  font-family: 'Noto Sans Tamil', 'Mukta Malar', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* 2.2 CENTER COLUMN: ISOLATED PRODUCT BOTTLES CUTOUT */
.krm-hero-center-col {
  flex: 0 0 22% !important;
  max-width: 22% !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.krm-bottles-presentation {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
}

.krm-bottles-retina-img {
  max-width: 100% !important;
  width: auto !important;
  max-height: 290px !important;
  height: auto !important;
  display: block !important;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.25)) !important;
  object-fit: contain !important;
  background: transparent !important;
}

/* 2.3 RIGHT COLUMN: VIDEO PLAYER & FLOATING BADGE */
.krm-hero-right-col {
  flex: 0 0 42% !important;
  max-width: 42% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

/* Floating Top-Right Badge */
.krm-top-floating-badge-wrap {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
}

.krm-top-floating-badge {
  background: linear-gradient(135deg, #065f46 0%, #064e3b 50%, #022c22 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 999px !important;
  padding: 6px 18px 6px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 6px 16px rgba(6, 78, 59, 0.3) !important;
  color: #ffffff !important;
  transition: transform 0.25s ease !important;
}

.krm-top-floating-badge:hover {
  transform: translateY(-2px) !important;
}

.krm-badge-play-circle {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #064e3b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  flex-shrink: 0 !important;
}

.krm-badge-play-circle svg {
  width: 12px !important;
  height: 12px !important;
  fill: currentColor !important;
  margin-left: 2px !important;
}

.krm-badge-label-text {
  font-family: 'Noto Sans Tamil', 'Mukta Malar', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  letter-spacing: 0.2px !important;
}

/* Video Player Frame */
.krm-video-player-frame {
  position: relative !important;
  width: 100% !important;
  background-color: #000000 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.krm-video-screen-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background-color: #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.krm-html5-video,
.krm-video-poster-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Big Circular Center Play Button */
.krm-video-play-btn {
  position: absolute !important;
  width: 66px !important;
  height: 66px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.65) !important;
  border: 3px solid #ffffff !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, box-shadow 0.28s ease !important;
  z-index: 9 !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.krm-video-play-btn:hover {
  transform: scale(1.14) !important;
  background: #059669 !important;
  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.5) !important;
}

.krm-video-play-btn svg {
  width: 26px !important;
  height: 26px !important;
  fill: #ffffff !important;
  margin-left: 3px !important;
}

/* Custom Controls Bar */
.krm-video-controls-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(15, 23, 42, 0.94) !important;
  padding: 8px 16px !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.krm-ctrl-btn {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  cursor: pointer !important;
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.krm-ctrl-btn:hover {
  color: #10b981 !important;
  transform: scale(1.1) !important;
}

.krm-ctrl-btn svg {
  width: 17px !important;
  height: 17px !important;
  fill: currentColor !important;
}

.krm-video-time {
  font-family: 'Outfit', monospace, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  white-space: nowrap !important;
}

.krm-scrubber-track {
  flex: 1 1 auto !important;
  height: 5px !important;
  background: rgba(255, 255, 255, 0.28) !important;
  border-radius: 999px !important;
  position: relative !important;
  cursor: pointer !important;
  overflow: visible !important;
}

.krm-scrubber-progress {
  height: 100% !important;
  background: #10b981 !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}

.krm-scrubber-input {
  position: absolute !important;
  top: -6px !important;
  left: 0 !important;
  width: 100% !important;
  height: 17px !important;
  opacity: 0 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* ==========================================================================
   3. BOTTOM ROW: 3-STEP INSTRUCTION FLOW (WHITE ROUNDED CARD)
   ========================================================================== */

.krm-steps-bottom-container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.krm-steps-white-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  padding: 14px 28px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.krm-step-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  cursor: pointer !important;
  transition: transform 0.25s ease !important;
}

.krm-step-item:hover {
  transform: translateY(-2px) !important;
}

/* Dark Green Step Number Circle */
.krm-step-circle-badge {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  background: #005a2c !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 3px 8px rgba(0, 90, 44, 0.3) !important;
  flex-shrink: 0 !important;
}

/* Step Photo Thumbnail */
.krm-step-photo-wrap {
  width: 95px !important;
  height: 58px !important;
  min-width: 95px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background-color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  flex-shrink: 0 !important;
}

.krm-step-photo-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.35s ease !important;
}

.krm-step-item:hover .krm-step-photo-wrap img {
  transform: scale(1.08) !important;
}

/* Step Instruction Text */
.krm-step-text-content {
  font-family: 'Noto Sans Tamil', 'Mukta Malar', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
}

/* Double-Chevron Divider (>>) */
.krm-step-chevron {
  color: #10b981 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.9 !important;
}

.krm-step-chevron svg {
  width: 24px !important;
  height: 24px !important;
  fill: currentColor !important;
}

/* ==========================================================================
   4. RESPONSIVE BREAKPOINTS (TABLET & MOBILE)
   ========================================================================== */

/* Tablet View (max-width: 1024px) */
@media (max-width: 1024px) {
  .krm-hero-video-card {
    padding: 20px 20px !important;
  }

  .krm-hero-top-row {
    flex-wrap: wrap !important;
    gap: 24px !important;
  }

  .krm-hero-left-col {
    flex: 0 0 55% !important;
    max-width: 55% !important;
  }

  .krm-hero-center-col {
    flex: 0 0 38% !important;
    max-width: 38% !important;
  }

  .krm-hero-right-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .krm-steps-white-card {
    padding: 12px 16px !important;
    gap: 10px !important;
  }

  .krm-step-photo-wrap {
    width: 75px !important;
    height: 50px !important;
    min-width: 75px !important;
  }

  .krm-step-text-content {
    font-size: 12px !important;
  }
}

/* Mobile View (max-width: 767px) */
@media (max-width: 767px) {
  .krm-hero-video-wrap {
    padding: 8px !important;
  }

  .krm-hero-video-card {
    padding: 18px 14px !important;
    border-radius: 14px !important;
    gap: 20px !important;
  }

  .krm-hero-top-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
  }

  /* Single-column vertical stack */
  .krm-hero-left-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    order: 1 !important;
    align-items: center !important;
    text-align: center !important;
  }

  .krm-hero-headline-block {
    align-items: center !important;
    text-align: center !important;
  }

  .krm-hero-title-line {
    font-size: 26px !important;
    text-align: center !important;
  }

  .krm-hero-subheadline {
    font-size: 14px !important;
    text-align: center !important;
  }

  .krm-highlights-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 8px !important;
    width: 100% !important;
  }

  .krm-highlight-circle-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .krm-hero-right-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    order: 2 !important;
  }

  .krm-top-floating-badge-wrap {
    justify-content: center !important;
  }

  .krm-top-floating-badge {
    font-size: 13px !important;
  }

  .krm-video-player-frame {
    border-radius: 14px !important;
  }

  .krm-video-play-btn {
    width: 52px !important;
    height: 52px !important;
  }

  .krm-video-play-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  .krm-hero-center-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    order: 3 !important;
  }

  .krm-bottles-retina-img {
    max-height: 220px !important;
  }

  /* 3-Step Instruction Flow Stacked on Mobile */
  .krm-steps-bottom-container {
    order: 4 !important;
  }

  .krm-steps-white-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px 14px !important;
    gap: 14px !important;
  }

  .krm-step-item {
    width: 100% !important;
    gap: 10px !important;
  }

  .krm-step-chevron {
    display: none !important;
  }

  .krm-step-photo-wrap {
    width: 80px !important;
    height: 52px !important;
    min-width: 80px !important;
  }

  .krm-step-text-content {
    font-size: 13px !important;
  }
}