/* -------------------------------------------------------------------------
 * ANIMATE TOP — MASTER BRAND STYLESHEET (CLOSED PALETTE & THEME RULES)
 * ------------------------------------------------------------------------- */

/* Typography Global */
body, h1, h2, h3, h4, h5, h6, p, a, button, input, textarea, select {
	font-family: 'Nunito', sans-serif !important;
}

/* Dual Logo Display Switcher */
.logo-img {
	height: auto;
	max-height: 42px;
	width: auto;
}
.logo-img-dark {
	display: block !important;
}
.logo-img-light {
	display: none !important;
}

html.light-mode .logo-img-dark,
body.light-mode .logo-img-dark,
.light-mode .logo-img-dark {
	display: none !important;
}

html.light-mode .logo-img-light,
body.light-mode .logo-img-light,
.light-mode .logo-img-light {
	display: block !important;
}

/* Header Dropdown Opacity (Rule 31) */
.header .nav-dropdown,
.header .submenu,
.nav-links .dropdown-menu {
	opacity: 1 !important;
	background-color: var(--bg-secondary) !important;
}

/* Primary Button & Glow Styles (Rule 6) */
.btn-primary,
.cta-primary,
.card-btn,
.hero .cta-primary {
	background: var(--accent-primary, #399CF9) !important;
	color: #FFFFFF !important;
	border: none !important;
	box-shadow: 0 4px 14px rgba(57, 156, 249, 0.35) !important;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover,
.cta-primary:hover,
.card-btn:hover,
.hero .cta-primary:hover {
	transform: translateY(-2px) scale(1.02) !important;
	box-shadow: 0 8px 24px rgba(57, 156, 249, 0.5) !important;
	color: #FFFFFF !important;
}



/* Eyebrow / Section Labels */
.section-label {
	color: var(--accent-primary, #399CF9) !important;
}

/* Testimonial Cards — No Italics (Rule 30) */
.testimonial-card,
.testimonial-card p,
.testimonial-card blockquote,
.testimonial-quote {
	font-style: normal !important;
}
.testimonial-stars,
.testimonial-card .stars {
	color: #F82A2A !important;
}

/* Floating WhatsApp Button (Section 3) */
.floating-cta-container {
	position: fixed !important;
	bottom: 24px !important;
	left: 24px !important;
	right: auto !important;
	top: auto !important;
	z-index: 99999 !important;
	display: flex !important;
	pointer-events: none !important;
}

#floating-whatsapp-btn {
	pointer-events: auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	background-color: #25D366 !important;
	color: #FFFFFF !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
	text-decoration: none !important;
	border: 0 !important;
	outline: none !important;
	position: relative !important;
}

#floating-whatsapp-btn:hover {
	transform: scale(1.08) !important;
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45) !important;
	color: #FFFFFF !important;
}

#floating-whatsapp-btn .cta-badge,
#floating-call-btn {
	display: none !important;
}

#floating-whatsapp-btn .cta-tooltip {
	position: absolute;
	left: calc(100% + 12px);
	background: #271013;
	color: #FFFFFF;
	font-size: 0.82rem;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 6px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	border: 1px solid #399CF9;
}

#floating-whatsapp-btn:hover .cta-tooltip {
	opacity: 1;
	transform: translateX(0);
}

/* Footer Monochrome (Rule 15) */
.footer-title {
	color: var(--text-primary, #FFFFFF) !important;
}
.footer-link,
.footer-contact-item,
.footer-brand-desc,
.footer-copy {
	color: var(--text-primary, #FFFFFF) !important;
}
html.light-mode .footer-title,
html.light-mode .footer-link,
html.light-mode .footer-contact-item,
html.light-mode .footer-brand-desc,
html.light-mode .footer-copy {
	color: #000000 !important;
}

.footer-contact-item {
	cursor: default !important;
	text-decoration: none !important;
}
.footer-contact-item:hover {
	color: inherit !important;
	text-decoration: none !important;
}

@media (max-width: 767px) {
	.footer-brand-desc {
		max-width: 100% !important;
	}
}

/* Stats Bar Icons */
.stat-icon {
	color: var(--accent-primary, #399CF9) !important;
}
.stat-icon-wrap {
	border: 0 !important;
	outline: none !important;
}

/* WooCommerce Section 10 Fixes */
.vibemotion-woo form.checkout_coupon button[name="apply_coupon"],
.vibemotion-woo table.cart td.actions .coupon .button {
	width: max-content !important;
	min-width: auto !important;
	white-space: nowrap !important;
}

.vibemotion-woo form.checkout_coupon[style*="display: none"],
.vibemotion-woo form.checkout_coupon[style*="display:none"] {
	display: none !important;
}

/* Blog Line Clamping */
.premium-stack-card .card-title,
.related-article-title {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.premium-stack-card .card-desc {
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}


/* ==========================================================================
   SOLID PALETTE HARMONIZATION, ZERO-GRADIENT HEADINGS & ICONS, PALETTE SHADOWS
   ========================================================================== */

/* 1. NO GRADIENT IN HEADINGS - Pure Solid Brand Palette */
.gradient-text,
h1 .gradient-text,
h2 .gradient-text,
h3 .gradient-text,
h4 .gradient-text,
h5 .gradient-text,
h6 .gradient-text,
.hero-title .gradient-text {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: initial !important;
    color: #399CF9 !important; /* Solid Brand Accent Blue */
    text-shadow: none !important;
}

.light-mode .gradient-text,
[data-theme="light"] .gradient-text,
html.light-mode .gradient-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: initial !important;
    color: #F82A2A !important; /* High-contrast Primary Red in Light Mode */
}

/* 2. NO GRADIENT IN ICONS AND ICON BACKGROUNDS - Solid Palette Colors */
.floating-card-icon {
    background: #399CF9 !important; /* Solid Accent Blue */
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(57, 156, 249, 0.4) !important;
}

.service-card .service-icon-box,
.service-icon-box {
    background: #399CF9 !important;
    color: #FFFFFF !important;
    border: none !important;
    transition: var(--transition-smooth);
}

.service-card:hover .service-icon-box {
    background: #F82A2A !important; /* Solid Primary Red on Card Hover */
    color: #FFFFFF !important;
    box-shadow: 0 8px 22px rgba(248, 42, 42, 0.45) !important;
    transform: scale(1.08) rotate(4deg);
}

.faq-icon,
.faq-item[open] .faq-icon {
    background: #399CF9 !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 15px rgba(57, 156, 249, 0.35) !important;
}

.pricing-card-play-btn {
    background: #F82A2A !important; /* Solid Primary Red */
    color: #FFFFFF !important;
    box-shadow: 0 8px 24px rgba(248, 42, 42, 0.45) !important;
}

.success-icon-wrapper {
    background: #63F859 !important; /* Solid Soft Green */
    color: #271013 !important;
    box-shadow: 0 8px 24px rgba(99, 248, 89, 0.4) !important;
}

a.footer-contact-item:hover .footer-contact-icon {
    background: #399CF9 !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
}

.blog-list-card-num {
    background: #399CF9 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(57, 156, 249, 0.3) !important;
}

/* 3. BUTTONS HOVER WITH BRAND PALETTE BOX SHADOWS */
.btn-primary {
    background: #399CF9 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 8px 20px -4px rgba(57, 156, 249, 0.45) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover {
    background: #2b86dc !important;
    color: #FFFFFF !important;
    box-shadow: 0 14px 30px -5px rgba(57, 156, 249, 0.6), 0 0 16px rgba(99, 248, 89, 0.25) !important;
    transform: translateY(-2px);
}

.btn-secondary {
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-secondary:hover {
    background: rgba(248, 42, 42, 0.12) !important;
    border-color: #F82A2A !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 24px -4px rgba(248, 42, 42, 0.4) !important;
    transform: translateY(-2px);
}

.filter-btn:hover,
.filter-btn.active {
    background: #399CF9 !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: 0 8px 20px rgba(57, 156, 249, 0.35) !important;
    transform: translateY(-2px);
}

/* 4. CARDS HOVER WITH BRAND PALETTE BOX SHADOWS */
.service-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.service-card:hover {
    border-color: rgba(57, 156, 249, 0.5) !important;
    box-shadow: 0 22px 48px -12px rgba(57, 156, 249, 0.25), 0 0 25px rgba(99, 248, 89, 0.15) !important;
    transform: translateY(-4px);
}

.service-card::after {
    background: #399CF9 !important; /* Solid accent indicator on hover */
}

.premium-stack-card.state-center {
    border: 1.5px solid rgba(57, 156, 249, 0.45) !important;
    box-shadow: 0 35px 70px rgba(39, 16, 19, 0.9), 0 0 32px rgba(57, 156, 249, 0.28) !important;
}

.premium-stack-card:hover,
.premium-stack-card.is-hovered {
    box-shadow: 0 40px 80px rgba(39, 16, 19, 0.95), 0 0 32px rgba(57, 156, 249, 0.38), 0 0 18px rgba(99, 248, 89, 0.22) !important;
    border-color: rgba(57, 156, 249, 0.65) !important;
}

.blog-list-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.blog-list-card:hover {
    border-color: rgba(57, 156, 249, 0.45) !important;
    box-shadow: 0 20px 42px -10px rgba(57, 156, 249, 0.28), 0 0 22px rgba(248, 42, 42, 0.15) !important;
    transform: translateY(-4px);
}

.pricing-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pricing-card:hover {
    border-color: rgba(248, 42, 42, 0.5) !important;
    box-shadow: 0 22px 48px -10px rgba(248, 42, 42, 0.25), 0 0 25px rgba(57, 156, 249, 0.18) !important;
    transform: translateY(-4px);
}

.review-card,
.testimonial-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.review-card:hover,
.testimonial-card:hover {
    border-color: rgba(99, 248, 89, 0.4) !important;
    box-shadow: 0 18px 40px -8px rgba(99, 248, 89, 0.2), 0 0 22px rgba(57, 156, 249, 0.16) !important;
    transform: translateY(-3px);
}

/* 5. LINKS HOVER PALETTE ACCENT GLOW */
a:not(.btn):not(.logo-link):hover {
    color: #399CF9;
    text-shadow: 0 0 12px rgba(57, 156, 249, 0.3);
}

/* Footer links remain monochrome strictly per Global Rule 15 */
footer a:hover,
.footer-bottom a:hover {
    color: #FFFFFF !important;
    text-shadow: none !important;
}
.light-mode footer a:hover,
[data-theme="light"] footer a:hover {
    color: #000000 !important;
    text-shadow: none !important;
}

.why-item-num { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: initial !important; color: #399CF9 !important; }


/* ==========================================================================
   GREEN COLOR EXPANSION, WHATSAPP CHATTY & BUTTON/ICON HOVER ENHANCEMENTS
   ========================================================================== */

/* 1. BUTTON HOVER FIX (ELIMINATE ALL PINK/PURPLE GRADIENTS) */
.btn-primary::before,
.btn-secondary::before,
.btn::before {
    display: none !important;
    opacity: 0 !important;
}

.btn-primary {
    background: #399CF9 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 8px 20px -4px rgba(57, 156, 249, 0.45) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover {
    background: #2581d8 !important;
    color: #FFFFFF !important;
    box-shadow: 0 14px 30px -4px rgba(57, 156, 249, 0.55), 0 0 20px rgba(99, 248, 89, 0.35) !important;
    transform: translateY(-2px);
}

.btn-secondary:hover {
    background: rgba(99, 248, 89, 0.1) !important;
    border-color: #63F859 !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 24px -4px rgba(99, 248, 89, 0.35) !important;
    transform: translateY(-2px);
}

/* 2. WHATSAPP CHATTY GREEN INTEGRATION (LIVE WHATSAPP CHAT ROW & ICON) */
.footer-contact-item[href*="wa.me"] .footer-contact-icon,
.footer-contact-item[href*="whatsapp"] .footer-contact-icon,
a[href*="wa.me"] .footer-contact-icon,
a[href*="whatsapp"] .footer-contact-icon {
    color: #25D366 !important;
    background: rgba(37, 211, 102, 0.12) !important;
    border-color: rgba(37, 211, 102, 0.45) !important;
    box-shadow: 0 0 14px rgba(37, 211, 102, 0.25) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

a.footer-contact-item[href*="wa.me"]:hover .footer-contact-icon,
a.footer-contact-item[href*="whatsapp"]:hover .footer-contact-icon {
    background: #25D366 !important;
    color: #FFFFFF !important;
    border-color: #25D366 !important;
    box-shadow: 0 0 22px rgba(37, 211, 102, 0.6) !important;
    transform: scale(1.1);
}

a.footer-contact-item[href*="wa.me"]:hover span:last-child,
a.footer-contact-item[href*="whatsapp"]:hover span:last-child {
    color: #25D366 !important;
}

/* 3. SOCIAL ICONS HOVER (NO GRADIENT - SOLID CLEAN PALETTE) */
.social-link {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: #FFFFFF !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.social-link:hover {
    background: #399CF9 !important;
    color: #FFFFFF !important;
    border-color: #399CF9 !important;
    box-shadow: 0 8px 22px rgba(57, 156, 249, 0.45) !important;
    transform: translateY(-3px);
}

.social-link[aria-label*="WhatsApp"]:hover,
.social-link[href*="wa.me"]:hover,
.social-link[href*="whatsapp"]:hover {
    background: #25D366 !important; /* Green for WhatsApp social icon */
    color: #FFFFFF !important;
    border-color: #25D366 !important;
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.55) !important;
}

/* 4. SOFT GREEN EXPANSION ACROSS WEBSITE */
/* A. Pulsing Live Status Dot on Section Labels */
.section-label::before {
    background-color: #63F859 !important;
    box-shadow: 0 0 10px rgba(99, 248, 89, 0.75) !important;
}

/* B. Feature Checkmarks in Soft Green */
.pricing-feature-icon:not(.disabled),
.pricing-feature-list li svg,
.why-item-icon svg,
.benefit-item svg {
    color: #63F859 !important;
}

/* C. Hero Floating Card 2 in Soft Green */
.floating-card-2 .floating-card-icon {
    background: #63F859 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(99, 248, 89, 0.45) !important;
}

/* D. Stats Bar Icons with Green Accent */
.stats-card:nth-child(1) .stat-icon,
.stat-item:nth-child(1) i,
.stats-card:nth-child(4) .stat-icon,
.stat-item:nth-child(4) i {
    color: #63F859 !important;
}

/* E. Success & Quality Indicators */
.success-icon-wrapper {
    background: #63F859 !important;
    color: #271013 !important;
    box-shadow: 0 8px 24px rgba(99, 248, 89, 0.45) !important;
}

/* F. Floating WhatsApp Button Green Glow */
#floating-whatsapp-btn {
    background: #25D366 !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5), 0 0 16px rgba(99, 248, 89, 0.4) !important;
}

#floating-whatsapp-btn:hover {
    box-shadow: 0 14px 34px rgba(37, 211, 102, 0.75), 0 0 24px rgba(99, 248, 89, 0.55) !important;
    transform: scale(1.08);
}

/* ==========================================================================
   BLUE COLOR BORDERS FOR ALL CARDS AND CONTAINERS
   ========================================================================== */
:root {
    --card-border-blue: rgba(57, 156, 249, 0.5);
    --card-border-blue-hover: #399CF9;
}

.light-mode {
    --card-border-blue: rgba(57, 156, 249, 0.45);
    --card-border-blue-hover: #399CF9;
}

/* All Cards, Boxes, and Content Containers */
.service-card,
.pricing-card,
.blog-list-card,
.blog-card,
.related-article-card,
.premium-stack-card,
.review-card,
.testimonial-card,
.floating-card,
.faq-item,

.contact-info-card,
.contact-info-item,
.contact-form,
.contact-form-wrapper,
.contact-section-wrapper,
.story-image-box,
.portfolio-item,
.cta-banner,
.cta-banner-wrapper,
.hero-canvas-wrapper,
.toggle-container {
    border-color: var(--card-border-blue) !important;
    border-width: 1.5px !important;
    border-style: solid !important;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease !important;
}

/* Why items feature accent border */
.why-item {
    border-left: 3px solid var(--card-border-blue) !important;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease !important;
}

/* Hover and Active states - Solid Accent Blue Glow */
.service-card:hover,
.pricing-card:hover,
.pricing-card.featured,
.blog-list-card:hover,
.blog-card:hover,
.related-article-card:hover,
.premium-stack-card:hover,
.review-card:hover,
.testimonial-card:hover,
.floating-card:hover,
.contact-info-item:hover,
.portfolio-item:hover,
.faq-item[open],
.why-item:hover {
    border-color: var(--card-border-blue-hover) !important;
    box-shadow: 0 12px 32px -8px rgba(57, 156, 249, 0.35) !important;
}

/* ==========================================================================
   USER VISUAL DIRECTION ENHANCEMENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SITE-WIDE GRADIENT (Image 1: Accent Blue #399CF9 to Primary Red #F82A2A)
   -------------------------------------------------------------------------- */
.gradient-text,
.why-item-num,
.hero-title .gradient-text,
.section-title .gradient-text {
    background: linear-gradient(135deg, #399CF9 0%, #F82A2A 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Pipeline timeline badges (Default neutral for all 4 steps, gradient glow on hover) */
.pipeline-badge,
.pipeline-container .pipeline-step .pipeline-badge,
.pipeline-step .pipeline-badge,
.pipeline-step:hover .pipeline-badge {
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
}

.pipeline-step:hover .pipeline-badge {
    background: linear-gradient(135deg, #399CF9 0%, #F82A2A 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 25px rgba(57, 156, 249, 0.55), 0 0 15px rgba(248, 42, 42, 0.35) !important;
    transform: scale(1.12);
}

/* Hero Play Overlay */
.hero-play-overlay,
.light-mode .hero-play-overlay {
    background: linear-gradient(135deg, #399CF9 0%, #F82A2A 100%) !important;
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: 0 10px 30px rgba(57, 156, 249, 0.45), 0 0 15px rgba(248, 42, 42, 0.35) !important;
}
.hero-play-overlay:hover,
.light-mode .hero-play-overlay:hover {
    transform: translate(-50%, -50%) scale(1.1) !important;
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: 0 15px 40px rgba(57, 156, 249, 0.6), 0 0 25px rgba(248, 42, 42, 0.5) !important;
}

/* --------------------------------------------------------------------------
   2 & 3. FOOTER SOCIAL ICONS IN LIGHT MODE (Images 2 & 3)
   - Default non-hover: Blue color (#399CF9) with subtle blue background/border
   - Hover: Solid blue (#399CF9) background with pure WHITE (#FFFFFF) icon
   -------------------------------------------------------------------------- */
.light-mode .social-link {
    color: #399CF9 !important;
    border: 1.5px solid rgba(57, 156, 249, 0.45) !important;
    background-color: rgba(57, 156, 249, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.light-mode .social-link svg {
    color: #399CF9 !important;
}

.light-mode .social-link svg[fill="currentColor"],
.light-mode .social-link svg path[fill="currentColor"] {
    fill: #399CF9 !important;
}

.light-mode .social-link:hover {
    background-color: #399CF9 !important;
    border-color: #399CF9 !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 20px rgba(57, 156, 249, 0.45) !important;
    transform: translateY(-3px) scale(1.08) !important;
}

.light-mode .social-link:hover svg,
.light-mode .social-link:hover svg path,
.light-mode .social-link:hover svg rect,
.light-mode .social-link:hover svg circle,
.light-mode .social-link:hover svg polygon,
.light-mode .social-link:hover svg line {
    color: #FFFFFF !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Special hover for WhatsApp footer social icon */
.light-mode .social-link[href*="wa.me"]:hover,
.social-link[href*="wa.me"]:hover {
    background-color: #25D366 !important;
    border-color: #25D366 !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45) !important;
}
.light-mode .social-link[href*="wa.me"]:hover svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   4. PLAY BUTTON SVG ON HOVER ACCORDING TO PALETTE (Image 4)
   -------------------------------------------------------------------------- */
.pricing-card-play-btn {
    background: #F82A2A !important; /* Solid Primary Red default */
    color: #FFFFFF !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 24px rgba(248, 42, 42, 0.45) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pricing-card-play-btn svg {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
    transition: transform 0.3s ease !important;
}

/* Hover on play button or card media: Switch to Palette Accent Blue with White Play SVG */
.pricing-card-media:hover .pricing-card-play-btn,
.pricing-card-play-btn:hover {
    background: #399CF9 !important;
    border-color: #399CF9 !important;
    color: #FFFFFF !important;
    transform: translate(-50%, -50%) scale(1.18) !important;
    box-shadow: 0 12px 30px rgba(57, 156, 249, 0.6) !important;
}

.pricing-card-media:hover .pricing-card-play-btn svg,
.pricing-card-play-btn:hover svg {
    fill: #FFFFFF !important;
    transform: scale(1.15) !important;
}

/* Pulse animation in Palette Accent Blue */
.pricing-card-play-btn::before,
.pricing-card-play-btn::after {
    background: rgba(57, 156, 249, 0.5) !important;
}

/* Custom cursor play mode */
.custom-cursor.play {
    background-color: rgba(57, 156, 249, 0.2) !important;
    border-color: #399CF9 !important;
}
.custom-cursor.play::after {
    color: #399CF9 !important;
}

/* --------------------------------------------------------------------------
   5. BUTTON WITH GREEN BORDER & GREEN BOX SHADOW (Image 5: "Explore Work")
   - Non-hover: Light green border
   - Hover: Dark green border & green box shadow
   -------------------------------------------------------------------------- */
.btn-secondary,
.hero-ctas .btn-secondary,
.cta-banner-btn-secondary {
    border: 2px solid rgba(99, 248, 89, 0.45) !important; /* Light green border */
    background-color: transparent !important;
    color: var(--text-primary) !important;
    box-shadow: 0 2px 10px rgba(99, 248, 89, 0.1) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.light-mode .btn-secondary,
.light-mode .hero-ctas .btn-secondary,
.light-mode .cta-banner-btn-secondary {
    border: 2px solid rgba(99, 248, 89, 0.5) !important; /* Light green border */
    background-color: rgba(99, 248, 89, 0.05) !important;
    color: #271013 !important;
}

/* Hover: Dark green border (#1ea952 / #16a34a) & vibrant green box shadow */
.btn-secondary:hover,
.hero-ctas .btn-secondary:hover,
.cta-banner-btn-secondary:hover {
    border-color: #1ea952 !important; /* Dark green border */
    background-color: rgba(30, 169, 82, 0.12) !important;
    box-shadow: 0 8px 25px -4px rgba(30, 169, 82, 0.6), 0 0 16px rgba(99, 248, 89, 0.4) !important; /* Green box shadow */
    transform: translateY(-3px) scale(1.02) !important;
    color: var(--text-primary) !important;
}

.light-mode .btn-secondary:hover,
.light-mode .hero-ctas .btn-secondary:hover,
.light-mode .cta-banner-btn-secondary:hover {
    border-color: #1ea952 !important; /* Dark green border */
    background-color: rgba(30, 169, 82, 0.15) !important;
    box-shadow: 0 8px 25px -4px rgba(30, 169, 82, 0.5), 0 0 14px rgba(99, 248, 89, 0.35) !important;
    color: #271013 !important;
}

/* ==========================================================================
   GREEN COLOR BG SVGS & LIGHT MODE ENHANCEMENTS
   ========================================================================== */

/* Enhanced visibility for all background decorative shapes in Light Mode */
.light-mode .cta-shapes,
.light-mode .cta-shape,
.light-mode .hero-decorations,
.light-mode .hero-shape,
.light-mode .services-decorations,
.light-mode .services-shape-right,
.light-mode .why-decorations,
.light-mode .why-shape,
.light-mode .pricing-decorations,
.light-mode .pricing-shape,
.light-mode .about-hero-decorations,
.light-mode .about-hero-shape {
    opacity: 0.9 !important;
}

/* Ensure background SVGs maintain crisp Soft Green vibrancy in Light Mode */
.light-mode .cta-shape-br svg circle[stroke*="99, 248, 89"],
.light-mode .cta-shape-tl svg polygon[stroke*="99, 248, 89"],
.light-mode .cta-shape-tl svg line[stroke*="99, 248, 89"] {
    stroke: #16a34a !important; /* Rich emerald/green for ultra-crisp light mode contrast */
}
.light-mode .cta-shape svg circle[fill="#63F859"],
.light-mode .hero-shape svg circle[fill="#63F859"],
.light-mode .services-shape-right svg circle[fill="#63F859"],
.light-mode .why-shape svg circle[fill="#63F859"],
.light-mode .pricing-shape svg circle[fill="#63F859"] {
    fill: #16a34a !important;
    filter: drop-shadow(0 0 4px rgba(22, 163, 74, 0.6)) !important;
}

/* Soft Green Background Ambient Glows */
.cta-glow-2,
.light-mode .cta-glow-2 {
    background: radial-gradient(circle, rgba(99, 248, 89, 0.28) 0%, rgba(99, 248, 89, 0) 70%) !important;
}

/* Section dot in Light Mode: Bright, crisp Green */
.light-mode .section-label::before {
    background: #16a34a !important;
    box-shadow: 0 0 10px rgba(22, 163, 74, 0.8) !important;
}

/* Feature Checkmarks in Light Mode: Crisp Green */
.light-mode .pricing-feature-item:not(.disabled) .pricing-feature-icon,
.light-mode .pricing-feature-icon:not(.disabled) {
    color: #16a34a !important;
    stroke: #16a34a !important;
}

/* WhatsApp row & icons in Light Mode: High contrast green */
.light-mode .footer-contact-item[href*="wa.me"] .footer-contact-icon {
    border-color: #25D366 !important;
    background-color: rgba(37, 211, 102, 0.12) !important;
    color: #16a34a !important;
}
.light-mode .footer-contact-item[href*="wa.me"]:hover .footer-contact-icon {
    background-color: #25D366 !important;
    color: #FFFFFF !important;
}


/* --------------------------------------------------------------------------
   STATS BAR: NO BORDER ON INDIVIDUAL BOXES (User Request)
   -------------------------------------------------------------------------- */
.stats-bar .stat-item,
.stats-grid .stat-item,
.stat-item,
.stats-card,
.stat-box,
.counter-box {
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
}

.stats-bar .stat-item:hover,
.stats-grid .stat-item:hover,
.stat-item:hover,
.stats-card:hover,
.stat-box:hover,
.counter-box:hover {
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: none !important;
    outline: none !important;
}

/* --------------------------------------------------------------------------
   FONT AWESOME WHATSAPP ICONS (Site-Wide User Request)
   -------------------------------------------------------------------------- */
/* Footer Social Icons */
.social-link i.fa-brands,
.social-link i.fa-whatsapp {
    font-size: 1.15rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
}

/* Light Mode Footer Social Icon */
.light-mode .social-link i.fa-whatsapp {
    color: #399CF9 !important;
}

.light-mode .social-link:hover i.fa-whatsapp,
.light-mode .social-link[aria-label*="WhatsApp"]:hover i.fa-whatsapp,
.light-mode .social-link[href*="wa.me"]:hover i.fa-whatsapp {
    color: #FFFFFF !important;
}

/* Dark Mode Footer Social Icon */
.social-link i.fa-whatsapp {
    color: #FFFFFF !important;
}

.social-link[aria-label*="WhatsApp"]:hover i.fa-whatsapp,
.social-link[href*="wa.me"]:hover i.fa-whatsapp {
    color: #FFFFFF !important;
}

/* Footer Contact List Icon ("Live WhatsApp Chat") */
.footer-contact-icon i.fa-brands,
.footer-contact-icon i.fa-whatsapp {
    font-size: 1.15rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #25D366 !important;
}

.footer-contact-item:hover .footer-contact-icon i.fa-whatsapp {
    color: #63F859 !important;
}

/* Floating WhatsApp Button */
#floating-whatsapp-btn .cta-icon-wrapper i.fa-brands,
#floating-whatsapp-btn .cta-icon-wrapper i.fa-whatsapp {
    font-size: 30px !important;
    color: #FFFFFF !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* --------------------------------------------------------------------------
   SPAM HONEYPOT & SCREEN-READER HIDDEN (Strict Site-Wide)
   -------------------------------------------------------------------------- */
.vibemotion-hp,
div.vibemotion-hp,
[class*="vibemotion-hp"],
.screen-reader-text,
.sr-only,
.visually-hidden {
    display: none !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* ==========================================================================
   VIBEMOTION-CUSTOMIZATION.MD BATCH IMPLEMENTATION
   ========================================================================== */

/* 1. Contact Page Right-Hand Card: White background in Light Mode (Prompt 1) */
.light-mode .contact-form,
.light-mode #agency-contact-form,
.light-mode .contact-section-wrapper .contact-form {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* 2. Hero H1 Max-Width 730px on About and Contact Pages (Section 1.2) */
.page-template-template-about .hero-title,
.page-template-template-contact .hero-title,
body.page-id-11 .hero-title,
body.page-id-12 .hero-title {
    max-width: 730px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3. Checkout Page Sticky Order Summary on Desktop (Prompt 16 & 1.2 Prompt 1) */
@media (min-width: 992px) {
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review {
        position: sticky !important;
        top: 100px !important;
        z-index: 10 !important;
    }
}

/* 4. Checkout Header Logo Sizing (Prompt 16) */
.vibemotion-woo-header .logo-img,
.woocommerce-checkout .logo-img {
    max-height: 38px !important;
    width: auto !important;
}

@media (max-width: 768px) {
    .vibemotion-woo-header .logo-img,
    .woocommerce-checkout .logo-img {
        max-width: 140px !important;
        height: auto !important;
    }
}

/* 5. Checkout Billing Details Gap 5px (Prompt 9 & 1.3 Prompt 1) */
.woocommerce-billing-fields .form-row label,
.woocommerce-checkout .form-row label {
    margin-bottom: 5px !important;
}

.woocommerce-billing-fields .form-row,
.woocommerce-checkout .form-row {
    margin-bottom: 14px !important;
}

/* 6. Checkout Create Account & Save to Account Checkbox Inline (1.2 Prompt 1 & 5) */
.woocommerce-checkout .form-row.create-account label.checkbox,
.woocommerce-account-fields label.checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 13.6px !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
}

.woocommerce-checkout .form-row.create-account input[type="checkbox"],
.woocommerce-account-fields input[type="checkbox"] {
    width: auto !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* 7. Project Brief Margin Bottom 10px (1.3 Prompt 2) */
#order_comments_field label,
.woocommerce-additional-fields label {
    margin-bottom: 10px !important;
    display: block !important;
}

/* 8. PayPal Spacing & Disclosure Gap (1.3 Prompt 1 & 8) */
#payment .payment_method_paypal,
.payment_box.payment_method_paypal {
    padding: 12px 16px !important;
    margin-bottom: 10px !important;
}

.woocommerce-privacy-policy-text {
    margin-top: 12px !important;
}

/* 9. Select2 Dark Mode Arrow Invert (Prompt 16) */
:root:not(.light-mode) .select2-container--default .select2-selection--single .select2-selection__arrow,
[data-theme="dark"] .select2-selection__arrow {
    filter: invert(1) !important;
}

.light-mode .select2-container--default .select2-selection--single .select2-selection__arrow {
    filter: none !important;
}

/* 10. Dark Theme Input Text Color White (1.3 Prompt 2) */
:root:not(.light-mode) .woocommerce input.input-text,
:root:not(.light-mode) .woocommerce textarea,
:root:not(.light-mode) input.form-input,
:root:not(.light-mode) textarea.form-input {
    color: #FFFFFF !important;
}

/* 11. FAQ Mobile Line Height 1.2 (1.3 Prompt 18) */
@media (max-width: 768px) {
    .faq-question,
    .faq-item summary,
    .faq-title {
        line-height: 1.2 !important;
    }
}

/* 12. Mobile Footer Bottom Padding 60px & Contact List Gap 0.7rem (1.2 Prompt 8 & 1.3 Prompt 12) */
@media (max-width: 768px) {
    .footer {
        padding-bottom: 60px !important;
    }
    .footer-contact-list {
        gap: 0.7rem !important;
    }
}

/* 13. Video Modal & Lightbox Z-Index Above Header (1.3 Prompt 16) */
.hero-video-trigger,
.hero-play-overlay,
.video-modal,
.modal-backdrop,
.portfolio-video-modal,
.pricing-video-modal {
    z-index: 10000 !important;
}

/* 14. LinkedIn Footer Social Icon Styling */
.social-link i.fa-linkedin-in,
.social-link i.fa-linkedin {
    font-size: 1.15rem !important;
}

.social-link[aria-label*="LinkedIn"]:hover,
.social-link[href*="linkedin"]:hover,
.light-mode .social-link[aria-label*="LinkedIn"]:hover,
.light-mode .social-link[href*="linkedin"]:hover {
    background: var(--accent-primary, #399CF9) !important;
    border-color: var(--accent-primary, #399CF9) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 18px rgba(57, 156, 249, 0.45) !important;
}

/* ==========================================================================
   CHECKOUT RETURNING CUSTOMER & LOGIN FORM (AS SHOWN IN USER IMAGES)
   ========================================================================== */
.vibemotion-woo .woocommerce-form-login-toggle {
    margin-bottom: 1.5rem !important;
}

.vibemotion-woo .woocommerce-form-login-toggle .woocommerce-info {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding: 1rem 1.25rem 1rem 1.75rem !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-left: 4px solid var(--accent-primary) !important;
    border-radius: var(--radius-sm, 6px) !important;
    color: var(--text-primary) !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
}

.light-mode .vibemotion-woo .woocommerce-form-login-toggle .woocommerce-info {
    background: #FBF8F8 !important;
    border-color: rgba(57, 156, 249, 0.3) !important;
    border-left-color: #399CF9 !important;
    color: #271013 !important;
}

.vibemotion-woo .woocommerce-form-login-toggle .woocommerce-info a.showlogin {
    color: var(--accent-primary) !important;
    font-weight: 700 !important;
    margin-left: 0.35rem !important;
    text-decoration: none !important;
    transition: color 0.2s ease, text-shadow 0.2s ease !important;
}

.vibemotion-woo .woocommerce-form-login-toggle .woocommerce-info a.showlogin:hover {
    color: #2581d8 !important;
    text-decoration: underline !important;
}

/* Expanded Login Card Form */
.vibemotion-woo form.woocommerce-form-login {
    background-color: var(--bg-secondary) !important;
    border: 1.5px solid rgba(57, 156, 249, 0.4) !important;
    border-radius: 12px !important;
    padding: clamp(1.25rem, 3vw, 2rem) !important;
    margin: 0 0 2rem !important;
    box-shadow: var(--card-shadow, 0 8px 24px rgba(0,0,0,0.12)) !important;
    transition: all 0.3s ease !important;
}

.light-mode .vibemotion-woo form.woocommerce-form-login {
    background-color: #FFFFFF !important;
    border-color: rgba(57, 156, 249, 0.35) !important;
    box-shadow: 0 10px 30px -5px rgba(57, 156, 249, 0.12) !important;
}

.vibemotion-woo form.woocommerce-form-login > p:first-of-type {
    color: var(--text-secondary, #666666) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
}

.light-mode .vibemotion-woo form.woocommerce-form-login > p:first-of-type {
    color: #4a5568 !important;
}

/* Two-column layout for Username and Password */
.vibemotion-woo form.woocommerce-form-login .form-row-first,
.vibemotion-woo form.woocommerce-form-login .form-row-last {
    width: calc(50% - 0.75rem) !important;
    display: inline-block !important;
    vertical-align: top !important;
    margin-bottom: 1.25rem !important;
}

.vibemotion-woo form.woocommerce-form-login .form-row-first {
    margin-right: 1.5rem !important;
}

@media (max-width: 768px) {
    .vibemotion-woo form.woocommerce-form-login .form-row-first,
    .vibemotion-woo form.woocommerce-form-login .form-row-last {
        width: 100% !important;
        margin-right: 0 !important;
    }
}

.vibemotion-woo form.woocommerce-form-login label {
    display: block !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
    color: var(--text-primary) !important;
}

.light-mode .vibemotion-woo form.woocommerce-form-login label {
    color: #271013 !important;
}

.vibemotion-woo form.woocommerce-form-login .input-text {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0.75rem 1rem !important;
    border-radius: 8px !important;
    border: 1.5px solid rgba(57, 156, 249, 0.3) !important;
    background-color: var(--bg-primary, #ffffff) !important;
    color: var(--text-primary, #000000) !important;
    font-size: 0.95rem !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.light-mode .vibemotion-woo form.woocommerce-form-login .input-text {
    background-color: #F8FAFC !important;
    color: #1a202c !important;
    border-color: #e2e8f0 !important;
}

.vibemotion-woo form.woocommerce-form-login .input-text:focus {
    border-color: #399CF9 !important;
    box-shadow: 0 0 0 3px rgba(57, 156, 249, 0.2) !important;
}

/* Password wrapper & eye toggle */
.vibemotion-woo form.woocommerce-form-login .password-input-wrap {
    position: relative !important;
    display: block !important;
}

.vibemotion-woo form.woocommerce-form-login .password-eye-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #718096 !important;
    padding: 4px !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
}

.vibemotion-woo form.woocommerce-form-login .password-eye-toggle:hover {
    color: #399CF9 !important;
}

/* Remember me & submit */
.vibemotion-woo form.woocommerce-form-login .woocommerce-form-login__rememberme {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    color: var(--text-secondary, #666666) !important;
    margin: 0.5rem 0 1rem !important;
    cursor: pointer !important;
}

.light-mode .vibemotion-woo form.woocommerce-form-login .woocommerce-form-login__rememberme {
    color: #4a5568 !important;
}

.vibemotion-woo form.woocommerce-form-login .woocommerce-form-login__submit {
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    background-color: var(--accent-primary, #399CF9) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(57, 156, 249, 0.4) !important;
    margin-top: 0.75rem !important;
}

.vibemotion-woo form.woocommerce-form-login .woocommerce-form-login__submit:hover {
    background-color: #2581d8 !important;
    box-shadow: 0 8px 24px -2px rgba(57, 156, 249, 0.55), 0 0 16px rgba(99, 248, 89, 0.3) !important;
    transform: translateY(-1px) !important;
}

.vibemotion-woo form.woocommerce-form-login .lost_password {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

.vibemotion-woo form.woocommerce-form-login .lost_password a {
    color: var(--accent-primary, #399CF9) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.vibemotion-woo form.woocommerce-form-login .lost_password a:hover {
    text-decoration: underline !important;
    color: #2581d8 !important;
}



/* ==========================================================================
   QUICK FIXES & PROMPT.TXT ADDITIONS
   ========================================================================== */

/* FIX 1: Remove excessive bottom spacing below buttons in blog cards (Image 1) */
.premium-stack-container {
    height: 480px !important;
    margin: 1.5rem auto 1.5rem auto !important;
}

.premium-stack-card {
    height: 435px !important;
}

.premium-stack-card .card-body {
    padding: 1rem 1.6rem 1.35rem 1.6rem !important;
    gap: 0.5rem !important;
}

.premium-stack-card .card-desc {
    margin-bottom: 0 !important;
}

.premium-stack-card .card-btn {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
}

/* FIX 2: Hide Skip to content link completely */
.skip-link,
a.skip-link {
    display: none !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* FIX 6: Reset Footer Contact Links & Icons to Default Brand Theme Colors */
.footer-contact-item[href*="wa.me"] .footer-contact-icon,
.footer-contact-item[href*="linkedin"] .footer-contact-icon,
.footer-contact-item .footer-contact-icon {
    background: rgba(57, 156, 249, 0.08) !important;
    color: var(--accent-primary, #399CF9) !important;
    border: 1.5px solid rgba(57, 156, 249, 0.35) !important;
    box-shadow: none !important;
}

.footer-contact-item:hover .footer-contact-icon {
    background: var(--accent-primary, #399CF9) !important;
    color: #FFFFFF !important;
    border-color: var(--accent-primary, #399CF9) !important;
    box-shadow: 0 4px 14px rgba(57, 156, 249, 0.4) !important;
}

.footer-contact-item:hover span {
    color: var(--accent-primary, #399CF9) !important;
}

/* FIX 7: Video Modal Player Z-Index to Always Render Above Sticky Header */
#video-modal,
.modal,
.modal.active,
div#video-modal,
.video-modal,
.portfolio-video-modal,
.pricing-video-modal {
    z-index: 9999999 !important;
}

#video-modal .modal-inner,
.modal .modal-inner {
    z-index: 10000000 !important;
    position: relative !important;
}

/* PROMPT.TXT CUSTOM USER CSS */
.woocommerce-error::before {
    display: none !important;
}

.cta-band__meta {
    max-width: 100% !important;
}

.accordion-item__panel p {
    max-width: 100% !important;
}

.section--commerce {
    padding-top: 40px !important;
}

.woocommerce-checkout .section__title {
    margin-bottom: 50px !important;
}

.woocommerce-checkout #payment div.payment_box::before {
    position: absolute !important;
    top: -13px !important;
}

[data-theme="dark"] .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
    filter: invert(1) !important;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0 !important;
}



/* ==========================================================================
   WOOCOMMERCE CHECKOUT PERFECTION & FIXES (IMAGE 1–5 RESOLUTION)
   ========================================================================== */

/* 1. Checkout Two-Column Grid & Sticky Order Summary (Image 1 Fix) */
@media (min-width: 992px) {
    .vibemotion-woo .woocommerce-checkout {
        display: grid !important;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        gap: 0 2rem !important;
        align-items: start !important;
    }

    .vibemotion-woo #customer_details {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin-bottom: 0 !important;
    }

    .vibemotion-woo .checkout-order-review-wrap,
    .vibemotion-woo #checkout-order-review-wrap {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: sticky !important;
        top: 100px !important;
        z-index: 10 !important;
        align-self: start !important;
    }

    /* Fallback if wrapper is not present in legacy views */
    .vibemotion-woo #order_review_heading {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin-top: 0 !important;
        margin-bottom: 1rem !important;
    }

    .vibemotion-woo #order_review {
        grid-column: 2 !important;
        grid-row: auto !important;
        margin-top: 0 !important;
        margin-bottom: 1.5rem !important;
    }
}

/* Eliminate gap between 'Your order' heading and order review card */
#checkout-order-review-wrap #order_review_heading,
.woocommerce-checkout #order_review_heading {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}

#checkout-order-review-wrap #order_review,
.woocommerce-checkout #order_review {
    margin-top: 0 !important;
}

/* 2. Billing Form Rhythm & Field Spacing (Image 1 Fix) */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #customer_details h3 {
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}

.woocommerce-billing-fields .form-row,
.woocommerce-checkout .form-row {
    margin-bottom: 18px !important; /* ~20px gap to next field */
    padding: 0 !important;
}

.woocommerce-billing-fields .form-row label,
.woocommerce-checkout .form-row label {
    margin-top: 0 !important;
    margin-bottom: 8px !important; /* Tight pairing between label and input */
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    display: block !important;
}

/* Street address secondary field (Apartment, suite, etc.) */
#billing_address_2_field {
    margin-top: -6px !important;
    margin-bottom: 18px !important;
}

/* Card inner padding */
.vibemotion-woo #customer_details .woocommerce-billing-fields,
.vibemotion-woo #order_review {
    padding: 1.75rem 2rem !important;
}

/* 3. Coupon Code Input & Primary Action Button (Image 2 Fix) */
.vibemotion-woo form.checkout_coupon {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: 540px !important;
    padding: 1.5rem 1.75rem !important;
    margin-bottom: 1.5rem !important;
}

.vibemotion-woo form.checkout_coupon .form-row-first {
    flex: 0 1 300px !important;
    max-width: 320px !important;
    width: 100% !important;
    margin: 0 !important;
}

.vibemotion-woo form.checkout_coupon #coupon_code {
    width: 100% !important;
    max-width: 320px !important;
    min-height: 48px !important;
    height: 48px !important;
    border-radius: 9999px !important;
    padding: 0.75rem 1.35rem !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
}

.vibemotion-woo form.checkout_coupon .form-row-last {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.vibemotion-woo form.checkout_coupon button[name="apply_coupon"] {
    background: var(--accent-primary, #399CF9) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9999px !important;
    padding: 0 1.75rem !important;
    min-height: 48px !important;
    height: 48px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(57, 156, 249, 0.35) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

.vibemotion-woo form.checkout_coupon button[name="apply_coupon"]:hover {
    background: #2581D8 !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(57, 156, 249, 0.5) !important;
    color: #ffffff !important;
}

/* 4. Payment Gateways & Radio Button Styling (Image 4 & 5 Fix) */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 12px !important;
    border-radius: var(--radius-sm, 10px) !important;
    transition: all 0.2s ease !important;
}

/* Circular Radio Button with centered dot when checked */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    border-radius: 50% !important;
    border: 2px solid var(--border-color, #d0d5dd) !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex: 0 0 20px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"]:checked {
    border-color: #399CF9 !important;
    background-color: #ffffff !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"]:checked::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #399CF9 !important;
    border: none !important;
}

/* Inline Label & Payment Icons */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.98rem !important;
    flex: 1 1 auto !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img {
    margin: 0 !important;
    max-height: 24px !important;
    width: auto !important;
}

/* Payment description / details box drops cleanly to full width below header */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > div.payment_box {
    width: 100% !important;
    flex: 1 1 100% !important;
    margin: 12px 0 4px 0 !important;
    padding: 16px 18px !important;
    border-radius: var(--radius-sm, 8px) !important;
}

/* 5. Stripe Card Element & 'Save to account' Checkbox (Image 4 Fix) */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"],
#wc-stripe_cc-new-payment-method {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    border-radius: 4px !important;
    border: 2px solid var(--border-color, #d0d5dd) !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex: 0 0 18px !important;
    position: relative !important;
    display: inline-block !important;
}

.woocommerce-checkout input[type="checkbox"]:checked,
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"]:checked,
#wc-stripe_cc-new-payment-method:checked {
    background: #399CF9 !important;
    border-color: #399CF9 !important;
}

.woocommerce-checkout input[type="checkbox"]:checked::after,
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"]:checked::after,
#wc-stripe_cc-new-payment-method:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 5px !important;
    top: 2px !important;
    width: 4px !important;
    height: 8px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
}

.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew label {
    display: inline-block !important;
    margin: 0 !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

/* 6. PayPal Notice & Alert Box Spacing (Image 3 Fix) */
.wc-ppcp-notice__info .woocommerce-error {
    margin: 0 !important;
    padding: 12px 16px !important;
    border-radius: var(--radius-sm, 8px) !important;
}

.woocommerce-error::before {
    display: none !important;
}

/* 7. Privacy Policy & Terms Spacing (Image 1 Fix) */
.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
    margin-top: 18px !important;
    margin-bottom: 16px !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 20px !important;
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions-checkbox-text {
    font-size: 0.9rem !important;
}

/* 8. Place Order Button Spacing & Style (Image 1 Fix) */
.woocommerce-checkout #payment #place_order {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    min-height: 52px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
}

/* 9. User-Provided Snippet Overrides */
[data-theme="dark"] .select2-selection__arrow,
[data-theme="dark"] .select2-container .select2-selection__arrow {
  filter: invert(1) !important;
}

.cta-band__meta {
    max-width: 100% !important;
}

.accordion-item__panel p {
	max-width: 100% !important;
}

.section--commerce{
	padding-top: 40px !important;
}

.woocommerce-checkout .section__title{
	margin-bottom: 50px !important;
}

.woocommerce-checkout #payment div.payment_box::before {
    position: absolute !important;
	top: -13px !important;
}

[data-theme="dark"] .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
    filter: invert(1) !important;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0 !important;
}

/* ==========================================================================
   VIDEO MODAL Z-INDEX & STACKING CONTEXT ESCAPE (PORTFOLIO & PRICING)
   ========================================================================== */
#video-modal,
.modal#video-modal,
div#video-modal,
.modal.active#video-modal {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background-color: rgba(10, 10, 12, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 99999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem !important;
}

#video-modal:not(.active) {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#video-modal.active {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: all !important;
}

#video-modal .modal-inner {
    position: relative !important;
    width: 70% !important;
    max-width: 900px !important;
    z-index: 100000000 !important;
}

#video-modal .modal-content {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background-color: #000000 !important;
    border-radius: var(--radius-md, 16px) !important;
    overflow: hidden !important;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.8), 0 0 40px rgba(57, 156, 249, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

#video-modal .modal-close {
    position: absolute !important;
    top: -48px !important;
    right: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    cursor: pointer !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 100000001 !important;
    transition: all 0.3s ease !important;
}

#video-modal .modal-close:hover {
    color: var(--accent-primary, #399CF9) !important;
    border-color: var(--accent-primary, #399CF9) !important;
    background-color: rgba(255, 255, 255, 0.22) !important;
    transform: rotate(90deg) !important;
}

#video-modal .modal-close svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
}

@media (max-width: 768px) {
    #video-modal .modal-inner {
        width: 95% !important;
    }
    #video-modal .modal-close {
        top: -42px !important;
        right: 0 !important;
        width: 36px !important;
        height: 36px !important;
    }
}

/* ==========================================================================
   BLOG CARDS: 2-LINE CLAMPING WITH ELLIPSIS, ZERO TEXT SLICING, PERFECT PROPORTIONS
   ========================================================================== */
.premium-stack-container {
    height: 505px !important;
    margin: 1.5rem auto 1.5rem auto !important;
}

.premium-stack-card {
    height: 460px !important;
}

.premium-stack-card .card-body {
    padding: 1.05rem 1.6rem 1.35rem 1.6rem !important;
    gap: 0.5rem !important;
    justify-content: flex-start !important;
}

.premium-stack-card .card-title,
.related-article-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.38 !important;
    max-height: calc(1.35rem * 1.38 * 2) !important;
    flex-shrink: 0 !important;
    word-break: normal !important;
}

.premium-stack-card .card-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.45 !important;
    max-height: calc(0.88rem * 1.45 * 2) !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
}

.premium-stack-card .card-btn {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

.footer-contact-icon .fa-whatsapp {
    font-size: 16px !important;
    line-height: 1 !important;
}

a.footer-contact-item {
    cursor: pointer !important;
}


/* === HEADER, NAV, THEME TOGGLE & SECTION VISIBILITY FIX ===
   Applied: 2026-09-11 10:10
   Fixes: header fixed position, theme toggle, logo switching, section reveals
   ========================================================================== */

/* --- HEADER: Always fixed, full-width, above everything --- */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
}

/* --- HEADER CONTAINER: Flex row, space-between --- */
.header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

/* --- NAV: Desktop flex row (not column) --- */
@media (min-width: 769px) {
    .nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 2.5rem !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        height: auto !important;
        width: auto !important;
    }
    .nav-link {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --- HEADER ACTIONS: Always flex row --- */
.header-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-shrink: 0 !important;
}

/* --- THEME TOGGLE BUTTON: Always visible, correct size --- */
.theme-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.theme-toggle svg {
    width: 18px !important;
    height: 18px !important;
    pointer-events: none !important;
}

/* --- LOGO: Correct image per theme --- */
/* Default (dark mode): show logo-img-dark, hide logo-img-light */
.logo-img-dark {
    display: block !important;
}
.logo-img-light {
    display: none !important;
}

/* Light mode: swap logos */
html.light-mode .logo-img-dark,
body.light-mode .logo-img-dark {
    display: none !important;
}
html.light-mode .logo-img-light,
body.light-mode .logo-img-light {
    display: block !important;
}

/* --- LOGO SIZE --- */
.logo-img {
    height: auto !important;
    max-height: 38px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* --- HERO: Enough padding to clear fixed header --- */
.hero {
    padding-top: 165px !important;
}

@media (max-width: 768px) {
    .hero {
        padding-top: 120px !important;
    }
}

/* --- THEME ICON VISIBILITY: sun/moon swap per mode --- */
/* Dark mode: show moon (currently dark → toggle to light) */
.theme-toggle .sun-icon {
    display: none;
}
.theme-toggle .moon-icon {
    display: block;
}

/* Light mode: show sun (currently light → toggle to dark) */
html.light-mode .theme-toggle .sun-icon,
body.light-mode .theme-toggle .sun-icon {
    display: block !important;
}
html.light-mode .theme-toggle .moon-icon,
body.light-mode .theme-toggle .moon-icon {
    display: none !important;
}

/* --- REVEAL SECTIONS: Always visible (opacity/visibility only — no display override) --- */
.reveal,
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-scale {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Cards/wrappers: only force opacity/visibility */
.service-card,
.portfolio-item,
.testimonials-wrapper,
.testimonial-card,
.why-card,
.why-features-clean,
.pricing-card,
.pricing-header,
.cta-banner {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Grids keep grid display */
.portfolio-grid {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.services-grid {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Filter bar stays flex */
.portfolio-filters {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.testimonials-track {
    opacity: 1 !important;
    visibility: visible !important;
}

/* === END HEADER FIX === */


/* ==========================================================================
   PERFECT FONT AWESOME SOCIAL ICONS (CLEAN HOVER, ZERO GLITCHES)
   ========================================================================== */
.footer-socials {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-top: 1.25rem !important;
}

.social-link {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(57, 156, 249, 0.08) !important;
    border: 1.5px solid rgba(57, 156, 249, 0.35) !important;
    color: var(--accent-primary, #399CF9) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.social-link i,
.social-link i.fa-brands,
.social-link i.fa-solid {
    font-size: 17px !important;
    line-height: 1 !important;
    color: var(--accent-primary, #399CF9) !important;
    transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Light mode overrides for default state */
.light-mode .social-link {
    background: rgba(57, 156, 249, 0.08) !important;
    border-color: rgba(57, 156, 249, 0.35) !important;
    color: #399CF9 !important;
}

.light-mode .social-link i,
.light-mode .social-link i.fa-brands,
.light-mode .social-link i.fa-solid {
    color: #399CF9 !important;
}

/* HOVER STATE: Solid brand blue background with crisp white icon */
.social-link:hover,
.light-mode .social-link:hover {
    background: var(--accent-primary, #399CF9) !important;
    border-color: var(--accent-primary, #399CF9) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 18px rgba(57, 156, 249, 0.45) !important;
    transform: translateY(-3px) !important;
}

.social-link:hover i,
.social-link:hover i.fa-brands,
.social-link:hover i.fa-solid,
.light-mode .social-link:hover i,
.light-mode .social-link:hover i.fa-brands,
.light-mode .social-link:hover i.fa-solid {
    color: #FFFFFF !important;
}


/* ==========================================================================
   INNER CTA BANNER: USE FOOTER BACKGROUND COLOR IN DARK MODE (INSTEAD OF BLACK)
   ========================================================================== */
.cta-banner,
html:not(.light-mode) .cta-banner,
body:not(.light-mode) .cta-banner {
    background-color: var(--bg-secondary, #311418) !important;
    background: var(--bg-secondary, #311418) !important;
    border-color: rgba(57, 156, 249, 0.35) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
}

html.light-mode .cta-banner,
body.light-mode .cta-banner {
    background: linear-gradient(135deg, #FFFFFF 0%, #F5F7FA 100%) !important;
    background-color: #FFFFFF !important;
    border-color: rgba(57, 156, 249, 0.3) !important;
}


/* ==========================================================================
   REVIEW CARDS: AVATAR SIZES STRICTLY LESS THAN 50px (44px x 44px)
   ========================================================================== */
.testimonial-user {
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
}

.testimonial-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--accent-primary, #399CF9) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    flex-shrink: 0 !important;
}

.testimonial-info {
    text-align: left !important;
}

.testimonial-stars {
    display: flex !important;
    gap: 3px !important;
    margin-bottom: 0.25rem !important;
    color: #399CF9 !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

.testimonial-name {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    color: var(--text-primary) !important;
}

.testimonial-role {
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: var(--text-secondary) !important;
    opacity: 0.85 !important;
}



/* ==========================================================================
   HERO CLOCK ICON SVG: PURE WHITE IN LIGHT MODE
   ========================================================================== */
html.light-mode .floating-card-2 .floating-card-icon,
body.light-mode .floating-card-2 .floating-card-icon,
.light-mode .floating-card-2 .floating-card-icon,
.floating-card-2 .floating-card-icon {
    color: #FFFFFF !important;
}

html.light-mode .floating-card-2 .floating-card-icon svg,
body.light-mode .floating-card-2 .floating-card-icon svg,
.light-mode .floating-card-2 .floating-card-icon svg,
.floating-card-2 .floating-card-icon svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

html.light-mode .floating-card-2 .floating-card-icon svg *,
body.light-mode .floating-card-2 .floating-card-icon svg *,
.light-mode .floating-card-2 .floating-card-icon svg *,
.floating-card-2 .floating-card-icon svg * {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   PORTFOLIO FILTERS REMOVAL (Fix 1)
   ========================================================================== */
.portfolio-filters {
    display: none !important;
}

/* ==========================================================================
   BLOGS SECTION TITLE 2-LINE SPLIT (Fix 2)
   Line 1: "Animation & Motion Guides"
   Line 2: "From Animate Top"
   ========================================================================== */
.blogs-section-title,
.premium-stack-section .section-title {
    max-width: 960px !important;
    text-wrap: normal !important;
}

.blogs-section-title .blog-heading-lead {
    display: block;
    white-space: normal;
}

@media (min-width: 768px) {
    .blogs-section-title .blog-heading-lead {
        white-space: nowrap;
    }
}

.blogs-section-title .blog-heading-hl,
.premium-stack-section .section-title .gradient-text {
    display: block;
    margin-top: 0.2rem;
}

/* ==========================================================================
   ABOUT US: REMOVE BOTTOM PADDING ON DELIVERY PIPELINE SECTION
   ========================================================================== */
.about-pipeline-section,
#process-pipeline,
section#process-pipeline,
section.about-pipeline-section {
    padding-bottom: 0 !important;
}

/* ==========================================================================
   FIX 1: BLOG STACK CARDS MOBILE RESPONSIVENESS (Zero Cut-Off, Image 1 Fix)
   ========================================================================== */
@media (max-width: 991px) {
    .premium-stack-container {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2.25rem !important;
        height: auto !important;
        max-width: 520px !important;
        width: 100% !important;
        margin: 1.5rem auto 2.5rem auto !important;
        padding: 0 16px !important;
    }

    .premium-stack-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        transform: none !important;
        opacity: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
        border: 1px solid var(--border-color) !important;
        background: var(--bg-tertiary) !important;
    }

    .premium-stack-card.state-left,
    .premium-stack-card.state-center,
    .premium-stack-card.state-right {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        opacity: 1 !important;
        z-index: 1 !important;
        display: flex !important;
    }

    .premium-stack-card .card-cover {
        position: relative !important;
        width: 100% !important;
        height: 220px !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    .premium-stack-card .card-cover-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .premium-stack-card .card-header-meta {
        position: absolute !important;
        top: 1rem !important;
        left: 1rem !important;
        right: 1rem !important;
        z-index: 2 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: auto !important;
    }

    .premium-stack-card .card-num {
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        color: #FFFFFF !important;
        text-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
    }

    .premium-stack-card .card-tag {
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: #FFFFFF !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        padding: 0.25rem 0.65rem !important;
        border-radius: 999px !important;
    }

    .premium-stack-card .card-body {
        padding: 1.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        height: auto !important;
        flex: 1 !important;
        overflow: visible !important;
        background: var(--bg-tertiary) !important;
    }

    .premium-stack-card .card-title {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0.25rem !important;
        max-height: none !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: var(--text-primary) !important;
    }

    .premium-stack-card .card-desc {
        font-size: 0.92rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.5rem !important;
        max-height: none !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: var(--text-secondary) !important;
    }

    .premium-stack-card .card-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: flex-start !important;
        padding: 0.9rem 1.8rem !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0 !important;
        border-radius: 9999px !important;
        background: var(--accent-primary) !important;
        color: #FFFFFF !important;
        text-decoration: none !important;
        box-shadow: 0 10px 25px -5px rgba(57, 156, 249, 0.4) !important;
    }
}

/* ==========================================================================
   FIX 2: HEADER LOGO & SAME SIZE BUTTONS ON MOBILE (Image 2 Fix)
   ========================================================================== */
@media (max-width: 991px) {
    .header .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .nav-logo,
    .header .nav-logo {
        display: flex !important;
        align-items: center !important;
    }

    .logo-img {
        height: 36px !important;
        max-height: 36px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .header-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.65rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Both buttons right of the logo: Theme toggle & Mobile hamburger must be EXACT same size */
    .theme-toggle,
    .mobile-toggle,
    button.theme-toggle,
    button.mobile-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid var(--border-color, rgba(57, 156, 249, 0.25)) !important;
        background: var(--bg-tertiary, #FFFFFF) !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
    }

    .light-mode .theme-toggle,
    .light-mode .mobile-toggle,
    html.light-mode .theme-toggle,
    html.light-mode .mobile-toggle {
        background: rgba(57, 156, 249, 0.08) !important;
        border: 1px solid rgba(57, 156, 249, 0.35) !important;
        color: var(--text-primary) !important;
    }

    .theme-toggle svg,
    .mobile-toggle svg {
        width: 20px !important;
        height: 20px !important;
        display: block !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-toggle .bar {
        display: none !important; /* Hide bars when SVG icon is active */
    }
}

/* ==========================================================================
   FIX 3: WOOCOMMERCE CHECKOUT "YOUR ORDER" TABLE (Image 3 -> Image 4 Fix)
   Enforce clean 2-column tabular layout across all mobile devices
   ========================================================================== */
.woocommerce-checkout table.woocommerce-checkout-review-order-table,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table,
.vibemotion-woo table.woocommerce-checkout-review-order-table,
#order_review table.shop_table {
    display: table !important;
    width: 100% !important;
    border: 1px solid rgba(57, 156, 249, 0.35) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background-color: var(--bg-tertiary, #FFFFFF) !important;
    margin: 1rem 0 1.75rem 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

/* Table Header: PRODUCT (left) | SUBTOTAL (right) */
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table thead,
.vibemotion-woo table.woocommerce-checkout-review-order-table thead,
#order_review table.shop_table thead {
    display: table-header-group !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table thead tr,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table thead tr,
.vibemotion-woo table.woocommerce-checkout-review-order-table thead tr,
#order_review table.shop_table thead tr {
    display: table-row !important;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table thead th,
.vibemotion-woo table.woocommerce-checkout-review-order-table thead th,
#order_review table.shop_table thead th {
    display: table-cell !important;
    background-color: rgba(57, 156, 249, 0.08) !important;
    color: var(--text-primary, #333333) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0.9rem 1.15rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(57, 156, 249, 0.25) !important;
    vertical-align: middle !important;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th.product-name,
#order_review table.shop_table thead th.product-name {
    text-align: left !important;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th.product-total,
#order_review table.shop_table thead th.product-total {
    text-align: right !important;
}

/* Table Body: Product + Qty (left) | Price (right on SAME row) */
.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tbody,
.vibemotion-woo table.woocommerce-checkout-review-order-table tbody,
#order_review table.shop_table tbody {
    display: table-row-group !important;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tbody tr,
.vibemotion-woo table.woocommerce-checkout-review-order-table tbody tr,
#order_review table.shop_table tbody tr {
    display: table-row !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tbody td,
.vibemotion-woo table.woocommerce-checkout-review-order-table tbody td,
#order_review table.shop_table tbody td {
    display: table-cell !important;
    padding: 1.1rem 1.15rem !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)) !important;
    vertical-align: middle !important;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td.product-name,
#order_review table.shop_table tbody td.product-name {
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: var(--text-primary) !important;
    width: auto !important;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td.product-name .product-quantity,
#order_review table.shop_table tbody td.product-name .product-quantity {
    font-weight: 700 !important;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td.product-total,
#order_review table.shop_table tbody td.product-total {
    text-align: right !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: var(--text-primary) !important;
    white-space: nowrap !important;
    width: auto !important;
}

/* Suppress data-title pseudoelement on checkout table rows */
.woocommerce-checkout table.woocommerce-checkout-review-order-table td[data-title]::before,
#order_review table.shop_table td[data-title]::before {
    display: none !important;
    content: none !important;
}

/* Table Footer: Subtotal & Total */
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot,
.vibemotion-woo table.woocommerce-checkout-review-order-table tfoot,
#order_review table.shop_table tfoot {
    display: table-footer-group !important;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot tr,
.vibemotion-woo table.woocommerce-checkout-review-order-table tfoot tr,
#order_review table.shop_table tfoot tr {
    display: table-row !important;
    border: none !important;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot th,
.vibemotion-woo table.woocommerce-checkout-review-order-table tfoot th,
#order_review table.shop_table tfoot th {
    display: table-cell !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 1rem 1.15rem !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)) !important;
    vertical-align: middle !important;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot td,
.vibemotion-woo table.woocommerce-checkout-review-order-table tfoot td,
#order_review table.shop_table tfoot td {
    display: table-cell !important;
    text-align: right !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    padding: 1rem 1.15rem !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)) !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* Light background tint for Subtotal cell (Image 4 match) */
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th,
#order_review table.shop_table tfoot tr.cart-subtotal th {
    background-color: rgba(57, 156, 249, 0.05) !important;
}

/* Order Total Row (Image 4 match: Bold Total label on left, large price on right) */
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td,
#order_review table.shop_table tfoot tr.order-total th,
#order_review table.shop_table tfoot tr.order-total td {
    border-bottom: none !important;
    padding: 1.15rem 1.15rem !important;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
#order_review table.shop_table tfoot tr.order-total th {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td strong,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td .woocommerce-Price-amount,
#order_review table.shop_table tfoot tr.order-total td strong,
#order_review table.shop_table tfoot tr.order-total td .woocommerce-Price-amount {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
}

/* ==========================================================================
   WOOCOMMERCE HERO PADDING-BOTTOM 0 (Checkout Image 1 Fix)
   ========================================================================== */
.woocommerce-checkout section.hero,
.woocommerce-page section.hero,
.woocommerce-checkout .hero {
    padding-bottom: 0 !important;
}

/* ==========================================================================
   ABOUT US HERO BOTTOM PADDING (Match other pages, Mobile: 0)
   ========================================================================== */
body.page-id-11 section.hero,
.page-template-about section.hero,
.about-hero-section {
    padding-bottom: 2.5rem !important;
}

@media (max-width: 768px) {
    body.page-id-11 section.hero,
    .page-template-about section.hero,
    .about-hero-section {
        padding-bottom: 0 !important;
        padding-top: 110px !important;
    }
}

/* ==========================================================================
   BLOG ARCHIVE HERO BOTTOM PADDING (Mobile: 0, As Marked in Image 1)
   ========================================================================== */
body.blog section.hero,
.blog-hero-section {
    padding-bottom: 2.5rem !important;
}

@media (max-width: 768px) {
    body.blog section.hero,
    .blog-hero-section {
        padding-bottom: 0 !important;
        padding-top: 110px !important;
    }
    body.blog .premium-stack-section {
        padding-top: 20px !important;
    }
    body.blog .premium-stack-container {
        margin-top: 0.5rem !important;
    }
}

/* ==========================================================================
   CONTACT US HERO BOTTOM PADDING (Mobile: 20px)
   ========================================================================== */
@media (max-width: 768px) {
    body.page-id-12 section.hero,
    .vibemotion-type-contact section.hero,
    .contact-hero-section {
        padding-bottom: 20px !important;
        padding-top: 110px !important;
    }
}

/* ==========================================================================
   HOME PAGE HERO: REMOVE MIN-HEIGHT
   ========================================================================== */
.home-hero-section,
#body > section.hero:first-of-type,
section.hero.home-hero-section {
    min-height: auto !important;
}

/* ==========================================================================
   BLOG STACK BUTTONS: MATCH OVERALL WEBSITE BUTTON SIZING (Like Book Strategy Call)
   ========================================================================== */
.premium-stack-card .card-btn,
.card-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    padding: 1rem 2rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 10px 25px -5px rgba(57, 156, 249, 0.4) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.premium-stack-card .card-btn:hover,
.card-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 30px -5px rgba(57, 156, 249, 0.55) !important;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .premium-stack-card .card-btn,
    .card-btn {
        padding: 0.85rem 1.65rem !important;
        font-size: 0.9rem !important;
    }
}

/* ==========================================================================
   ABOUT US: PROCESS PIPELINE BADGES VISIBILITY IN LIGHT MODE
   ========================================================================== */
html.light-mode .pipeline-badge,
body.light-mode .pipeline-badge,
.light-mode .pipeline-badge,
:root[data-theme="light"] .pipeline-badge,
.light-mode .pipeline-container .pipeline-step .pipeline-badge,
.light-mode .pipeline-step .pipeline-badge {
    background: #EBF4FE !important;
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    color: #0F172A !important;
    box-shadow: 0 4px 16px rgba(57, 156, 249, 0.22), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

html.light-mode .pipeline-step:hover .pipeline-badge,
body.light-mode .pipeline-step:hover .pipeline-badge,
.light-mode .pipeline-step:hover .pipeline-badge,
:root[data-theme="light"] .pipeline-step:hover .pipeline-badge,
.light-mode .pipeline-container .pipeline-step:hover .pipeline-badge {
    background: linear-gradient(135deg, #399CF9 0%, #F82A2A 100%) !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: 0 0 25px rgba(57, 156, 249, 0.55), 0 0 15px rgba(248, 42, 42, 0.35) !important;
    transform: scale(1.12);
}

/* ==========================================================================
   WOOCOMMERCE ORDER MODAL DURATION PILLS: BORDER REMOVAL
   ========================================================================== */
.vm-order-dur,
.vm-order-dur:hover,
.vm-order-dur.is-active,
.light-mode .vm-order-dur,
[data-theme='light'] .vm-order-dur,
.light-mode .vm-order-dur:hover,
[data-theme='light'] .vm-order-dur:hover,
.light-mode .vm-order-dur.is-active,
[data-theme='light'] .vm-order-dur.is-active {
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
}

/* ==========================================================================
   ALL WOOCOMMERCE BUTTONS & CTA: UNIFIED HOME PAGE BLUE (#399CF9)
   ========================================================================== */
.vibemotion-woo #place_order,
.vibemotion-woo button#place_order,
.vibemotion-woo form.checkout_coupon button[name="apply_coupon"],
.vibemotion-woo .checkout_coupon .button,
.vibemotion-woo form.checkout button.button,
.vibemotion-woo .button.alt,
.vibemotion-woo a.button.alt,
.vibemotion-woo button.button.alt,
.vibemotion-woo input.button.alt,
.vibemotion-woo .checkout-button,
.vibemotion-woo a.checkout-button,
.vibemotion-woo .return-to-shop a,
.vibemotion-woo .return-to-shop .btn,
.vibemotion-woo .woocommerce a.button.alt,
.vibemotion-woo .woocommerce button.button.alt,
.vibemotion-woo .woocommerce input.button.alt,
.vibemotion-woo .woocommerce #respond input#submit.alt,
.vibemotion-woo table.cart td.actions .coupon .button,
.vibemotion-woo table.cart td.actions button.button,
.vibemotion-woo .woocommerce-Button,
.vibemotion-woo .woocommerce-button,
.vibemotion-woo .woocommerce-form-login__submit,
.vibemotion-woo .woocommerce-form-register__submit,
.vibemotion-woo button[name="save_account_details"],
.vibemotion-woo button[name="save_address"],
/* CTA Banner primary button (Home, About Us, etc.) */
.cta-banner-btn-primary,
.cta-banner .cta-banner-btn-primary,
.cta-banner-actions .cta-banner-btn-primary,
html.light-mode .cta-banner-btn-primary,
body.light-mode .cta-banner-btn-primary,
.light-mode .cta-banner-btn-primary,
:root[data-theme="light"] .cta-banner-btn-primary {
    background: var(--accent-primary, #399CF9) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(57, 156, 249, 0.35) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease !important;
}

.vibemotion-woo #place_order:hover,
.vibemotion-woo button#place_order:hover,
.vibemotion-woo form.checkout_coupon button[name="apply_coupon"]:hover,
.vibemotion-woo .checkout_coupon .button:hover,
.vibemotion-woo form.checkout button.button:hover,
.vibemotion-woo .button.alt:hover,
.vibemotion-woo a.button.alt:hover,
.vibemotion-woo button.button.alt:hover,
.vibemotion-woo input.button.alt:hover,
.vibemotion-woo .checkout-button:hover,
.vibemotion-woo a.checkout-button:hover,
.vibemotion-woo .return-to-shop a:hover,
.vibemotion-woo .return-to-shop .btn:hover,
.vibemotion-woo .woocommerce a.button.alt:hover,
.vibemotion-woo .woocommerce button.button.alt:hover,
.vibemotion-woo .woocommerce input.button.alt:hover,
.vibemotion-woo .woocommerce #respond input#submit.alt:hover,
.vibemotion-woo table.cart td.actions .coupon .button:hover,
.vibemotion-woo table.cart td.actions button.button:hover,
.vibemotion-woo .woocommerce-Button:hover,
.vibemotion-woo .woocommerce-button:hover,
.vibemotion-woo .woocommerce-form-login__submit:hover,
.vibemotion-woo .woocommerce-form-register__submit:hover,
.vibemotion-woo button[name="save_account_details"]:hover,
.vibemotion-woo button[name="save_address"]:hover,
/* CTA Banner button hover */
.cta-banner-btn-primary:hover,
.cta-banner .cta-banner-btn-primary:hover,
.cta-banner-actions .cta-banner-btn-primary:hover,
html.light-mode .cta-banner-btn-primary:hover,
body.light-mode .cta-banner-btn-primary:hover,
.light-mode .cta-banner-btn-primary:hover,
:root[data-theme="light"] .cta-banner-btn-primary:hover {
    background: #2581D8 !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(57, 156, 249, 0.5) !important;
}

/* ==========================================================================
   CONTACT US: FAQ SECTION HEADER MARGIN-BOTTOM REMOVED
   ========================================================================== */
.faq-header,
section.section-padding:has(.faq-accordion) .container > div:first-child,
.vibemotion-type-contact section.section-padding:last-of-type .container > div:first-child {
    margin-bottom: 0 !important;
}