/*
Theme Name: caterpillar
Theme URI: https://wordpress.org/themes/caterpillar/
Template: twentytwentyfive
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.5.1781587023
Updated: 2026-06-16 05:17:03

*/



/* ============================================================
   1. BASE / GLOBAL
   ============================================================ */
 :root :where(.wp-block-button .wp-block-button__link) {
    padding-bottom: 13px !important;
}
/* Smooth anchor scrolling across the whole page */
html {
  scroll-behavior: smooth;
}
 
/* Remove underline on nav links on hover; highlight in brand green */
:root :where(.wp-block-navigation a:where(:not(.wp-element-button)):hover) {
  text-decoration: none;
  color: #86F934 !important;
}
 
/* Remove visible focus ring on links (note: consider restoring for
   keyboard accessibility — outline:none can harm a11y) */
a:focus {
  outline: none;
}
 
 
/* ============================================================
   2. LAYOUT UTILITIES
   ============================================================ */
 .contact-form-wrap{margin-top: -20px;}
/* Sticky sidebar / sticky section offset — sits below a ~120px fixed header */
.sticky-section {
  top: 120px;
}
 
/* Force an element to full width on smaller viewports */
.m-full-width {
  width: 100% !important;
}
 .list-style-p {
    position: relative;
    padding-left: 16px;
    white-space: nowrap;
}

.list-style-p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    transform: translateY(-50%);
}
/* Absolute-cover helper — fills a relatively-positioned parent */
.inset-0 {
  position: absolute;
  top:    0;
  right:  0;
  bottom: 0;
  left:   0;
}
 
/* Thin vertical divider used between two-column stat rows */
.divider {
  height:     auto;
  min-height: auto;
  width:      2px;
}
 
/* Responsive visibility toggles */
.mobile-disable { /* hidden via media query below */  }
.mobile-enable  { display: none !important; }
 
 
/* ============================================================
   3. TYPOGRAPHY & LINKS
   ============================================================ */
 
/* Bullet markers on checklist items use brand green */
.checklist li::marker {
  color: #86F934;
}
 
/* Inline text links — fade slightly on hover */
.text-link a {
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
.text-link a:hover {
  text-decoration: none;
  opacity: 0.7;
}
 
 
/* ============================================================
   4. INTERACTIVE ELEMENTS
   ============================================================ */
.typing-text-card{max-width:735px !important;}
/* ── Buttons ────────────────────────────────────────────── */
 
/* Smooth transitions on all WP + native button variants */
button,
.wp-block-button__link,
.button {
  transition: all 0.3s ease-in-out;
}
 
/* Subtle lift + fade on hover */
button:hover,
.wp-block-button__link:hover,
.bton:hover {
  opacity:   0.8;
  /*transform: translateY(-2px);*/
}
 
/* ── Invisible anchor overlay (used for whole-card clicks) ── */
.a-link {
  cursor: pointer;
}
.a-link a {
  display:    block;
  height:     100%;
  width:      100%;
  text-align: center;
  opacity:    0; /* invisible — acts as click target only */
}
 
 
/* ============================================================
   5. CARD HOVER EFFECTS
   ============================================================ */
 
/*
 * .hover-cards
 * Base transition for interactive feature / pricing cards.
 * On hover the card scales up, darkens, gains a soft glow border,
 * and reveals a radial-glow pseudo-element in the top-right corner.
 */
.hover-cards {
  transition:
    transform         0.3s ease,
    background-color  0.3s ease,
    box-shadow        0.3s ease,
    border-color      0.3s ease;
  will-change: transform;
}
 
.hover-cards:hover {
  transform:        scale(1.02);
  background-color: #000 !important;
  box-shadow:       0 0 16px rgba(133, 202, 26, 0.19);
  border:           1px solid rgba(129, 198, 22, 0.2);
}
 
/* Radial glow blob — hidden by default, fades in on hover */
.hover-cards::after {
  content:       "";
  position:      absolute;
  width:         128px;
  height:        128px;
  right:         0;
  top:           -12px;
  background:    rgba(132, 204, 22, 0.1); /* brand-green tint */
  filter:        blur(20px);
  border-radius: 9999px; /* circle */
  opacity:       0;
  transition:    opacity 0.3s ease;
  pointer-events: none;
  z-index:       1;
}
 
.hover-cards:hover::after {
  opacity: 1;
}
.hover-cards.green-bubble{
	overflow:hidden;
}
.hover-cards.green-bubble::after{
  content:       "";
  position:      absolute;
  width:         128px;
  height:        128px;
  right:         0;
  top:           -12px;
  background:    rgba(132, 204, 22, 0.1); /* brand-green tint */
  filter:        blur(20px);
  border-radius: 9999px; /* circle */
  transition:    opacity 0.3s ease;
  pointer-events: none;
  opacity:1;
  z-index:       1;
}
/* ── Revenue-leak card variant ──────────────────────────── */
/*
 * Overrides the default green glow with a red (danger) glow
 * to signal a negative / warning metric.
 */
.hover-cards.revenue-leak-card:hover {
  box-shadow: 0 4px 19.3px rgba(249, 53, 53, 0.2);
  border:     1px solid rgba(249, 53, 53, 0.2);
}
 
/* Default glow blob colour (reset here so the rule order is clear) */
.hover-cards.revenue-leak-card::after {
  background: rgba(132, 204, 22, 0.1);
}
 
/* Red glow blob on the revenue-leak variant */
.hover-cards.revenue-leak-card:hover::after {
  background: rgba(249, 53, 53, 0.1);
}
 
 
/* ============================================================
   6. HEADER & TEMPLATE PARTS
   ============================================================ */
 
/* Sticky header — always on top of page content */
header {
  position: sticky;
  top:      0;
  z-index:  9999;
}
 
/* Remove default browser margins on header, footer, and post content */
footer.wp-block-template-part,
header.wp-block-template-part,
.entry-content {
  margin: 0;
}
 
 
/* ============================================================
   7. MARQUEE (SCROLLING TICKER)
   ============================================================ */
 
/*
 * A horizontally scrolling row of USP items.
 * Works by doubling the list content so the animation loops
 * seamlessly: the inner flex wrapper is 200 % wide, and
 * translateX(-50 %) moves it exactly one copy to the left.
 * Pauses on hover for readability.
 */
.usps-section {
  overflow: hidden;
}
 
.marquee-row {
  overflow: hidden;
  width:    100%;
  position: relative;
}
 
/* Outer row must not wrap */
.marquee-row li {
  white-space: nowrap;
}
 
/* Inner group — laid out as a single flex line and animated */
.marquee-row > .wp-block-group {
  display:        flex !important;
  flex-wrap:      nowrap !important;
  width:          max-content;
  animation:      marqueeScroll 8s linear infinite;
  will-change:    transform;
}
 
/* Each duplicated set of items */
.marquee-row .wp-block-group > .wp-block-group {
  flex-shrink:  0;
  white-space:  nowrap;
}
 
/* Pause the ticker while the user mouses over it */
.marquee-row:hover > .wp-block-group {
  animation-play-state: paused;
}
 
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* slide exactly one copy out */
}
 
 
/* ============================================================
   8. CONTACT FORM
   ============================================================ */
 
.contact-form-wrap {
  max-width: 100%;
  position:  relative;
}
 
.contact-form-wrap p {
  position: relative; /* needed for absolutely-positioned validation tips */
}
 
/* Field labels */
.contact-form-wrap label {
  display:         block;
  color:           #C3C3C3;
  font-size:       12px;
  font-weight:     500;
  letter-spacing:  0.6px;
  margin-bottom:   16px;
}
 
/* Text inputs and select dropdowns */
.contact-form-wrap input,
.contact-form-wrap select {
  width:           100%;
  height:          48px;
  background:      rgba(9, 9, 11, 0.56);
  border:          1px solid #2b2d34;
  border-radius:   8px;
  color:           #fff;
  font-size:       16px;
  font-family:     var(--wp--preset--font-family--inter);
  padding:         0 12px;
  margin-top:      8px !important;
  box-sizing:      border-box;
  transition:      all 0.3s ease-in-out;
}
 
/* Phone-flag library elements need the same top margin */
.intl-tel-input,
.country-select {
  margin-top: 8px !important;
}
 
/* Placeholder text colour */
.contact-form-wrap input::placeholder {
  color: #8d8d8d;
}
 
/* Active / focused state — solid border in brand green */
.contact-form-wrap input:focus,
.contact-form-wrap select:focus {
  outline:          none;
  border-color:     #84d30f;
  background:       #09090B;
}
 
/* Country list items in the intl-tel-input dropdown */
.intl-tel-input .country-list li.country {
  background: #09090B;
}
 
/* ── Submit button ──────────────────────────────────────── */
.contact-form-wrap .wpcf7-submit {
  width:        100%;
  height:       48px;
  background:   #86F934;
  color:        #000;
  border:       none;
  border-radius: 4px;
  font-size:    18px;
  font-weight:  500;
  font-family:  var(--wp--preset--font-family--inter);
  cursor:       pointer;
  margin-top:   8px;
  transition:   all 0.3s ease-in-out;
  padding-bottom:1px;
}
 
.contact-form-wrap .wpcf7-submit:hover {
  opacity:    0.9;
  background: #84CC16; /* slightly darker brand green */
}
 
/* ── Validation & spinner ───────────────────────────────── */
 
/* Inline validation error tip — pinned to top-right of its parent <p> */
/* .wpcf7-not-valid-tip {
  position:    absolute;
  margin-top:  -2px;
  margin-left: 2px !important;
  left:        0;
  right:       0;
  text-align:  right;
}
  */
/* Submission spinner — centred horizontally at the bottom of its parent */
span.wpcf7-spinner {
  position: absolute;
  left:     0;
  right:    0;
  bottom:   0;
  margin:   0 auto;
}
 
/* Remove bottom margin from the last form field / button paragraph */
.contact-form-wrap p:last-child {
  margin-bottom: 0;
}
 
/* Centred helper note beneath the form */
.form-note {
  text-align: center;
  color:      #d0d0d0;
  margin-top: 20px;
  font-size:  16px;
}
 

/* === CF7 — invalid field highlight === */
.wpcf7-form-control-wrap.wpcf7-not-valid input,
.wpcf7-form-control-wrap.wpcf7-not-valid textarea,
.wpcf7-form-control-wrap.wpcf7-not-valid select {
  border: 1.5px solid #E24B4A;
  background: #fff6f6;
  box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.12);
  animation: cf7shake 0.3s ease;
  outline: none;
}

@keyframes cf7shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
}

/* === Tooltip bubble === */
.wpcf7-not-valid-tip {
  position: absolute;
  right: 0;
  top: calc(100% + 0);
  background: #E24B4A;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px 5px 8px;
  border-radius: 5px;
  white-space: nowrap;
  z-index: 999;
  pointer-events: none;
  animation: cf7fadeIn 0.2s ease;
}

/* Arrow pointing up at the field */
.wpcf7-not-valid-tip::after {
  content: '';
  position: absolute;
  top: -5px;
  right: 12px;
  border-width: 0 5px 5px;
  border-style: solid;
  border-color: transparent transparent #E24B4A;
}

/* Warning icon */
.wpcf7-not-valid-tip::before {
  content: '⚠';
  margin-right: 5px;
  font-size: 11px;
}

@keyframes cf7fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Make the wrap relative so tooltip positions correctly */
.wpcf7-form-control-wrap {
  position: relative;
}
 /* === CF7 response output banner === */
.wpcf7-response-output {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 1.5rem 0 0;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  border: none;                        /* remove CF7's default border */
  border-left: 4px solid transparent;
  border-radius: 0 8px 8px 0;
  animation: cf7slideIn 0.25s ease;
}

/* Error / validation failed */
.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-not-valid {
  background: #FCEBEB;
  border-left-color: #E24B4A;
  color: #791F1F;
}

/* Sent successfully */
.wpcf7-response-output.wpcf7-mail-sent-ok {
  background: #EAF3DE;
  border-left-color: #3B6D11;
  color: #27500A;
}

/* Spam blocked */
.wpcf7-response-output.wpcf7-spam-blocked {
  background: #FAEEDA;
  border-left-color: #854F0B;
  color: #633806;
}

@keyframes cf7slideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}


.marquee-row-new {
    overflow: hidden;
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100%;
    position: relative;
}

.marquee-row-new-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: marqueeScroll 60s linear infinite;
}


.marquee-row-new:hover .marquee-row-new-track {
    animation-play-state: paused;
}
 
.marquee-row-new-track > * {
    flex-shrink: 0;
    white-space: nowrap;
}
@keyframes marqueeScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.wpcf7-form-control:focus::placeholder {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ============================================================
   9. RESPONSIVE BREAKPOINTS
   ============================================================ */
 
/* ── Large desktops (≤1400px) ──────────────────────────── */
@media (max-width: 1400px) {
  /* Tighten section padding on smaller screens */
  .container {
    padding-left:   40px !important;
    padding-right:  40px !important;
    padding-top:    64px !important;
    padding-bottom: 64px !important;
    overflow:       hidden;
  }
 
  /* Hero splits into equal halves */
  .hero-form    { flex-basis: 50% !important; }
  .hero-content { width: 45% !important; }
}
 
/* ── Tablets — FAQ stack breaks (≤1091px) ────────────────── */
@media (max-width: 1091px) {
  .faq-stack { width: 100% !important; }
}
 
/* ── Tablets — hide/show responsive helpers (≤820px) ──── */
@media (max-width: 820px) {
  .mobile-disable { display: none !important; }
  .mobile-enable  { display: block !important; }
 
  /* Remove manual line breaks in headings and captions */
  h2 br,
  .p-caption br { display: none; }
 
  /* Allow late-added layout components to reflow below the fold */
  .faq-stack,
  .three-grid-card,
  .four-grid-card,
  .typing-text-card { margin-top: 64px !important; }
  .sticky-section {position: static;}
  .our-difference .divider{display:none;}
  .four-grid-card  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-row {justify-content: center;}
	.our-diff-caption{}
	.diff-list{}
}
 
/* ── Tablets — hero and grids stack (≤768px) ─────────────── */
@media (max-width: 768px) {
	.sm-text-center{text-align:center !important;align-items: center !important;}
  /* Hero switches from side-by-side to stacked */
  .hero-row     { flex-direction: column; }
  .hero-form    { flex-basis: 100% !important; }
  .hero-content { width: 100% !important; }
 
  /* Feature and product grids become 2-column */
  .three-grid-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .four-grid-card  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 
  /* Two-column stat / info row becomes vertical */
  .two-row-stack { flex-direction: column; }
 
  /* Divider makes no sense in a single column layout */
  .divider { display: none; }
 
  /* Reduce section spacing */
  .faq-stack,
  .three-grid-card,
  .four-grid-card,
  .typing-text-card { margin-top: 48px !important; }
 
  /* Slightly smaller heading size on mobile */
  .heading-three-sm { font-size: clamp(18px, 2vw, 20px) !important; }
}
 
/* ── Mobile (≤640px) ──────────────────────────────────────── */
@media (max-width: 640px) {
  /* Minimal padding on small screens */
  .container {
    padding-left:   20px !important;
    padding-right:  20px !important;
    padding-top:    48px !important;
    padding-bottom: 48px !important;
  }
 
  /* Tighter hero form padding */
  .hero-form { padding: 16px !important; }
 
  /* Slightly smaller submit button label */
  .contact-form-wrap .wpcf7-submit { font-size: 16px; }
 
  /* All grid columns collapse to single column */
  .two-grid-card   { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .three-grid-card { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .four-grid-card  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
 
  /* Compact card padding */
  .hover-cards { padding: 16px !important; }
 
  /* Remove fixed title heights — allow natural height on mobile */
  .title-height { min-height: auto !important; }
 
  /* Slightly smaller input text */
  .contact-form-wrap input,
  .contact-form-wrap select { font-size: 14px; }
/*  */
.diffrence-icon img {
    max-width: 48px;
}
.wp-block-group.alignwide.wp-container-content-0733e5d0.is-vertical.is-content-justification-stretch.is-layout-flex.wp-container-core-group-is-layout-0e0021a6.wp-block-group-is-layout-flex {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}
  
}