/* =============================================
   CUSTOM SECTION - Block-based Page Builder
   Frontend rendering styles
   ============================================= */

.custom-section {
  padding: 80px 0;
  color: var(--color-three, #999);
}
.custom-section h2,
.custom-section h3,
.custom-section h4,
.custom-section h5,
.custom-section h6 {
  color: var(--white-color, #fff);
}
.custom-section__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--color-three, #999);
}

/* ── Block content styles ───────────────────── */

/* Headings */
.block-heading { margin-bottom: 0; }

/* Text */
.block-text { line-height: 1.7; }
.block-text p { margin-bottom: 12px; }
.block-text p:last-child { margin-bottom: 0; }

/* Image */
.block-image { margin: 10px 0; }
.block-image img { border-radius: 8px; }
.block-image figcaption {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}

/* Buttons */
.block-button { margin: 10px 0; }
.block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0;
}

/* Table */
.block-table { margin: 10px 0; }
.block-table .table-responsive { overflow-x: auto; }
.block-table .table {
  width: 100%;
  border-collapse: collapse;
}
.block-table .table th,
.block-table .table td {
  padding: 12px 16px;
  border: 1px solid #dee2e6;
  text-align: left;
}
.block-table .table th {
  background: #f8f9fa;
  font-weight: 600;
}
.block-table__caption {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

/* Spacer & Divider */
.block-spacer { display: block; }
.block-divider {
  border: none;
  border-top: 2px solid #dee2e6;
  margin: 10px auto;
}

/* List */
.block-list { padding-left: 24px; margin: 10px 0; }
.block-list li { margin-bottom: 8px; line-height: 1.6; }
.block-list--check { list-style: none; padding-left: 0; }
.block-list--check li i { color: var(--color-check); margin-right: 8px; }

/* Quote */
.block-quote {
  border-left: 4px solid var(--theme-color, #6366f1);
  padding: 20px 24px;
  margin: 20px 0;
  background: #f8f9fa;
  border-radius: 0 8px 8px 0;
}
.block-quote p {
  font-size: 18px;
  font-style: italic;
  margin-bottom: 12px;
}
.block-quote cite {
  font-size: 14px;
  color: #666;
  font-style: normal;
}
.block-quote__source { color: #999; }

/* Video */
.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.block-video__caption {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}

/* Columns */
.block-columns {
  display: grid;
  gap: 30px;
}
.block-columns--2 { grid-template-columns: 1fr 1fr; }
.block-columns--3 { grid-template-columns: 1fr 1fr 1fr; }
.block-columns--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 768px) {
  .block-columns--2,
  .block-columns--3,
  .block-columns--4 {
    grid-template-columns: 1fr;
  }
}

/* Icon + Text */
.block-icon {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 10px 0;
}
.block-icon__symbol {
  font-size: 32px;
  color: var(--theme-color, #6366f1);
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99,102,241,0.08);
  border-radius: 12px;
}
.block-icon__body h4 { margin-bottom: 4px; }
.block-icon__body p { color: #666; font-size: 14px; line-height: 1.6; }

/* Text alignment helpers (only if not already in theme) */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Block carousel (uses Swiper) */
.block-carousel {
  margin: 10px 0;
}
.block-carousel img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* =============================================
   GROWTH ASSESSMENT FORM STYLES
   ============================================= */

#growth-assessment-form .form-group.has-error input,
#growth-assessment-form .form-group.has-error select,
#growth-assessment-form .form-group.has-error textarea {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}

#growth-assessment-form .form-success-message,
#growth-assessment-form .form-error-message {
  margin-bottom: 20px;
}

#growth-assessment-form .alert {
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 0;
}

#growth-assessment-form .alert-success {
  background: rgba(25, 135, 84, 0.15);
  border: 1px solid rgba(25, 135, 84, 0.3);
  color: #75d4a7;
}

#growth-assessment-form .alert-danger {
  background: rgba(220, 53, 69, 0.15);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #f1aeb5;
}

#growth-assessment-form button.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

#growth-assessment-form .form-disclaimer {
  color: var(--color-three, #999);
}

/* =============================================
   HERO PERCENTAGE BOX FIX
   Remove bounce animation and properly size for dynamic values
   ============================================= */

.slider-one_percentage {
  /* No bounce animation */
  animation: none !important;
  -webkit-animation: none !important;
  
  /* Fluid sizing based on content */
  width: auto;
  min-width: 90px;
  max-width: 160px;
  padding: 18px 24px 14px 24px;
  overflow: visible;
  
  /* Center the content */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* The arrow icon - position nicely */
.slider-one_percentage i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

/* Main percentage value */
.slider-one_percentage .slider-one_percent {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

/* The % subscript */
.slider-one_percentage .slider-one_percent sub {
  font-size: 0.45em;
  bottom: 0;
  margin-left: 2px;
}

/* Percentage text label below */
.slider-one_percentage .slider-one_percentage-text {
  font-size: 13px;
  line-height: 1.3;
  margin-top: 4px;
  white-space: nowrap;
}

/* =============================================
   CAROUSEL / GRID DISPLAY MODE STYLES
   Allows switching between carousel and static grid layout
   ============================================= */

/* ── Hero Banner Static Mode ───────────────── */
.slider-one--static .slider-static-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.slider-one--static .slider-static-item {
  position: relative;
  flex: 1 1 100%;
  min-height: 75vh;
  /* Match the carousel slide padding to account for fixed header */
  padding: 200px 0px 180px;
}
/* Remove carousel-specific styles in static mode */
.slider-one--static .main-slider {
  overflow: visible;
}
/* Override clip-path animations - content should be visible immediately in static mode */
.slider-one--static .slider-one_title,
.slider-one--static .slider-one_heading,
.slider-one--static .slider-one_text,
.slider-one--static .slider-one_button,
.slider-one--static .slider-one_image {
  clip-path: polygon(-2% -8%, 102% -8%, 102% 115%, -2% 115%) !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ── Team Grid Mode ────────────────────────── */
.team-one--grid .team-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -15px;
}
.team-one--grid .team-grid_item {
  padding: 0 15px;
  margin-bottom: 30px;
  flex: 0 0 auto;
}
.team-one--grid .team-grid_item .team-block_one {
  height: 100%;
}

/* ── Testimonials Grid Mode ────────────────── */
.testimonial--grid .testimonial-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -15px;
}
.testimonial--grid .testimonial-grid_item {
  padding: 0 15px;
  margin-bottom: 30px;
  flex: 0 0 auto;
}
.testimonial--grid .testimonial-grid_item .testimonial-block_one {
  height: 100%;
}
.testimonial--grid .testimonial-grid_item .testimonial-block_one-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Hide any leftover swiper pagination in grid mode */
.testimonial--grid .three-item_carousel-pagination,
.testimonial--grid .swiper-pagination {
  display: none !important;
}

/* =============================================
   CTA SECTION REDESIGN
   Cleaner, more balanced look with gradient fade
   ============================================= */

/* Solid background to prevent see-through */
.hn-cta {
  background-color: var(--color-one, #0a0a18);
}

/* Reduce overall height */
.hn-cta_inner {
  padding: 50px 70px 50px 70px;
  background: linear-gradient(
    to top,
    rgba(var(--main-color-rgb), 0.18) 0%,
    rgba(var(--main-color-rgb), 0.08) 40%,
    rgba(var(--main-color-rgb), 0.02) 100%
  );
  border: 1px solid rgba(var(--main-color-rgb), 0.15);
}

/* Image container - allow overflow and position from bottom */
.hn-cta_image {
  position: absolute;
  bottom: 0;
  right: 40px;
  top: -5%;
  z-index: 2;
  display: flex;
  align-items: flex-end;
}

.hn-cta_image img {
  max-height: 105%;
  width: auto;
  object-fit: contain;
  object-position: bottom;
  border-radius: 0;
}

/* Adjust inner container for absolute positioned image */
.hn-cta_inner {
  position: relative;
  overflow: visible;
  min-height: 220px;
}

/* Give text column more space on the left */
.hn-cta .row {
  position: relative;
}

/* Subtle glow effect replacing the circle */
.hn-cta_inner::before {
  width: 600px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--main-color-rgb), 0.12) 0%, transparent 60%);
  top: auto;
  bottom: -50px;
  right: 50%;
  transform: translateX(50%);
}

/* Responsive adjustments for CTA */
@media only screen and (max-width: 991px) {
  .hn-cta_inner {
    padding: 40px 30px;
    overflow: hidden;
  }
  .hn-cta_image {
    position: relative;
    right: 0;
    top: 0;
    bottom: auto;
    margin-top: 30px;
    justify-content: center;
  }
  .hn-cta_image img {
    max-height: none;
    max-width: 80%;
  }
}

@media only screen and (max-width: 767px) {
  .hn-cta_inner {
    padding: 35px 24px;
  }
  .hn-cta_image img {
    max-width: 70%;
  }
}

/* =============================================
   SECTION BACKGROUND OVERRIDE - Hide decorative
   theme elements when a custom background is set
   ============================================= */

/* When has-bg-image is present, hide all default decorative overlays */

/* Steps section: background overlay, icon, dashed circle, dots */
.steps-one.has-bg-image > .steps-one_bg,
.steps-one.has-bg-image > .steps-one_icon,
.steps-one.has-bg-image .circle-layer,
.steps-one.has-bg-image .dots-layer {
  display: none !important;
}

/* Hero section: decorative patterns and floating icons */
.has-bg-image > .slider-one_icon,
.has-bg-image > .slider-one_icon-two,
.has-bg-image > .slider-one_pattern,
.has-bg-image > .slider-one_pattern-two,
.has-bg-image > .slider-one_pattern-three,
.has-bg-image > .slider-one_pattern-four,
.has-bg-image .slider-one_pattern,
.has-bg-image .slider-one_pattern-two,
.has-bg-image .slider-one_pattern-three,
.has-bg-image .slider-one_pattern-four,
.has-bg-image .slider-one_icon,
.has-bg-image .slider-one_icon-two {
  display: none !important;
}

/* About section: pattern, icons, tab shadow */
.about-one.has-bg-image > .about-one_pattern,
.about-one.has-bg-image > .about-one_icon,
.about-one.has-bg-image > .about-one_icon-two,
.about-one.has-bg-image .about-one_tab-shadow {
  display: none !important;
}

/* FAQ section: background overlay, icon */
.faq-one.has-bg-image > .faq-one_bg,
.faq-one.has-bg-image > .faq-one_icon {
  display: none !important;
}

/* Pricing section: background overlay */
.price-one.has-bg-image > .price-one_bg {
  display: none !important;
}

/* Social section: shadow, pattern overlays */
.social-one.has-bg-image > .social-one_bg-shadow,
.social-one.has-bg-image .social-one_bg,
.social-one.has-bg-image .social-one_bg-two {
  display: none !important;
}

/* News section: shadow overlays */
.news-one.has-bg-image > .news-one_shadow,
.news-one.has-bg-image > .news-one_shadow-two {
  display: none !important;
}

/* Answer section: pattern overlay */
.answer-one.has-bg-image .answer-one_pattern {
  display: none !important;
}

/* CTA section: radial gradient glow pseudo-element */
.hn-cta.has-bg-image .hn-cta_inner::before {
  display: none !important;
}

/* Page title section: decorative icons and shadows */
.page-title.has-bg-image .page-title-icon,
.page-title.has-bg-image .page-title-icon-two,
.page-title.has-bg-image .page-title-shadow,
.page-title.has-bg-image .page-title-shadow_two {
  display: none !important;
}

/* Footer section: decorative background pattern */
.main-footer.has-bg-image > .footer_pattern {
  display: none !important;
}

/* =============================================
   LOGO HEIGHT - Match navigation menu box height
   ============================================= */

.hn-header-logo {
  max-height: 72px !important;
}

/* Sticky/fixed header - proportionally smaller */
.main-header.fixed-header .hn-header-logo {
  max-height: 56px !important;
}

/* Mobile - maintain proportions */
@media only screen and (max-width: 767px) {
  .hn-header-logo {
    max-height: 48px !important;
  }
}