.elementor-kit-27973{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-27973 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//*
 * SORACO ELEMENTOR - COMPLETE STYLE OVERRIDE
 * ============================================
 * Add this CSS to: Elementor > Site Settings > Custom CSS
 * OR to: Appearance > Customize > Additional CSS
 * 
 * This ensures the deep purple/indigo color scheme AND all hover
 * effects match the preview exactly.
 */

/* ============================================
   CSS VARIABLES (for consistency)
   ============================================ */
:root {
  --soraco-bg-dark: #1a1a3e;
  --soraco-bg-darker: #1a1a3e;
  --soraco-bg-card: #1a1939;
  --soraco-bg-card-hover: #1f1e4d;
  --soraco-purple-500: #8b5cf6;
  --soraco-purple-400: #a78bfa;
  --soraco-purple-300: #c4b5fd;
  --soraco-purple-200: #e9d5ff;
  --soraco-blue-500: #6366f1;
  --soraco-text-primary: #ffffff;
  --soraco-text-secondary: #a5b4c8;
  --soraco-text-muted: #94a3b8;
  --soraco-border: rgba(139, 92, 246, 0.3);
  --soraco-border-hover: rgba(139, 92, 246, 0.5);
}

/* ============================================
   SECTION BACKGROUNDS
   ============================================ */

/* All dark sections */
.elementor-section[data-id="hero-section"],
.elementor-section[data-id="pillars-section"],
.elementor-section[data-id="pillars-cards"],
.elementor-section[data-id="crossplatform-section"],
.elementor-section[data-id="cp-cards"],
.elementor-section[data-id="cp-languages"],
.elementor-section[data-id="flexible-section"],
.elementor-section[data-id="feature-ecom"],
.elementor-section[data-id="feature-portal"],
.elementor-section[data-id="feature-mobile"],
.elementor-section[data-id="editions-header"],
.elementor-section[data-id="editions-cards"],
.elementor-section[data-id="cta-section"],
.elementor-section[data-id="footer-section"] {
  background-color: var(--soraco-bg-dark) !important;
}

/* All sections use same background */
.elementor-section[data-id="crossplatform-section"],
.elementor-section[data-id="cp-cards"],
.elementor-section[data-id="cp-languages"] {
  background-color: var(--soraco-bg-dark) !important;
}

/* ============================================
   PILLAR CARDS (Protection, Management, Automation)
   - Hover lift effect
   - Border color change
   - Shadow on hover
   ============================================ */

.soraco-pillar-card,
.elementor-element[data-id="pillar-1-box"] .elementor-widget-container,
.elementor-element[data-id="pillar-2-box"] .elementor-widget-container,
.elementor-element[data-id="pillar-3-box"] .elementor-widget-container {
  background-color: var(--soraco-bg-card) !important;
  border: 1px solid var(--soraco-border) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateY(0) !important;
}

.soraco-pillar-card:hover,
.elementor-element[data-id="pillar-1-box"] .elementor-widget-container:hover,
.elementor-element[data-id="pillar-2-box"] .elementor-widget-container:hover,
.elementor-element[data-id="pillar-3-box"] .elementor-widget-container:hover {
  transform: translateY(-4px) !important;
  border-color: var(--soraco-border-hover) !important;
  box-shadow: 0 20px 25px -5px rgba(139, 92, 246, 0.15),
              0 10px 10px -5px rgba(139, 92, 246, 0.1) !important;
  background-color: var(--soraco-bg-card-hover) !important;
}

/* Icon styling in pillar cards */
.soraco-pillar-card .elementor-icon,
.elementor-element[data-id*="pillar-"] .elementor-icon {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2)) !important;
  border-radius: 12px !important;
  color: var(--soraco-purple-400) !important;
}

.soraco-pillar-card .elementor-icon i,
.elementor-element[data-id*="pillar-"] .elementor-icon i {
  color: var(--soraco-purple-400) !important;
}

.soraco-pillar-card .elementor-icon-box-title,
.elementor-element[data-id*="pillar-"] .elementor-icon-box-title {
  color: var(--soraco-text-primary) !important;
}

.soraco-pillar-card .elementor-icon-box-description,
.elementor-element[data-id*="pillar-"] .elementor-icon-box-description {
  color: var(--soraco-text-secondary) !important;
}

/* ============================================
   PLATFORM CARDS (Desktop apps, Web services, Mobile apps, Productivity add-ins)
   Only style via .soraco-platform-card class (see below)
   ============================================ */

/* ============================================
   PLATFORM CARDS - UNIVERSAL FALLBACK
   Uses CSS class added to each icon-box widget
   Target the icon-box-wrapper which contains the actual content
   ============================================ */

.soraco-platform-card .elementor-icon-box-wrapper {
  background: rgba(139, 92, 246, 0.1) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
}

.soraco-platform-card:hover .elementor-icon-box-wrapper {
  background: rgba(139, 92, 246, 0.2) !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
}

/* Fallback: also try widget-container in case wrapper doesn't exist */
.soraco-platform-card .elementor-widget-container:not(:has(.elementor-icon-box-wrapper)) {
  background: rgba(139, 92, 246, 0.1) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  border-radius: 16px !important;
  padding: 32px !important;
}

.soraco-platform-card .elementor-icon,
.soraco-platform-card .elementor-icon i {
  font-size: 32px !important;
  color: #c4b5fd !important;
}

.soraco-platform-card .elementor-icon-box-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #f3e8ff !important;
}

/* ============================================
   LANGUAGE & APP CHIPS
   - Background color change on hover
   - Text color change on hover
   ============================================ */

/* Language chips (purple) */
.soraco-lang-chip,
a[href*="protect-"],
a[href*="c-sharp"],
a[href*="vb-net"],
a[href*="cpp"],
a[href*="delphi"],
a[href*="foxpro"],
a[href*="vba"],
a[href*="filemaker"],
a[href*="clarion"],
a[href*="rust"],
a[href*="powershell"],
a[href*="xojo"],
a[href*="labview"],
a[href*="java"],
a[href*="python"] {
  background-color: rgba(139, 92, 246, 0.1) !important;
  border: 1px solid var(--soraco-border) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  color: var(--soraco-purple-200) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
}

.soraco-lang-chip:hover,
a[href*="protect-"]:hover,
a[href*="c-sharp"]:hover,
a[href*="vb-net"]:hover,
a[href*="cpp"]:hover,
a[href*="delphi"]:hover,
a[href*="foxpro"]:hover,
a[href*="vba"]:hover,
a[href*="filemaker"]:hover,
a[href*="clarion"]:hover,
a[href*="rust"]:hover,
a[href*="powershell"]:hover,
a[href*="xojo"]:hover,
a[href*="labview"]:hover,
a[href*="java"]:hover,
a[href*="python"]:hover {
  background-color: rgba(139, 92, 246, 0.2) !important;
  color: var(--soraco-purple-300) !important;
}

/* App chips (blue) */
.soraco-app-chip,
a[href*="ms-word"],
a[href*="ms-excel"],
a[href*="ms-outlook"],
a[href*="autocad"],
a[href*="revit"] {
  background-color: rgba(99, 102, 241, 0.15) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  color: #a5b4fc !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
}

.soraco-app-chip:hover,
a[href*="ms-word"]:hover,
a[href*="ms-excel"]:hover,
a[href*="ms-outlook"]:hover,
a[href*="autocad"]:hover,
a[href*="revit"]:hover {
  background-color: rgba(99, 102, 241, 0.25) !important;
  color: #c7d2fe !important;
}

/* ============================================
   CTA BUTTONS
   - Primary: gradient with lift effect
   - Secondary: border with background change
   ============================================ */

/* Primary button (Download trial, Buy Now gradient) */
.soraco-btn-primary,
a.soraco-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 24px !important;
  border-radius: 12px !important;
  background: linear-gradient(90deg, var(--soraco-purple-500), var(--soraco-blue-500)) !important;
  color: var(--soraco-text-primary) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.3),
              0 4px 6px -2px rgba(139, 92, 246, 0.2) !important;
  transition: all 0.2s ease !important;
  transform: translateY(0) !important;
}

.soraco-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 25px -5px rgba(139, 92, 246, 0.4),
              0 10px 10px -5px rgba(139, 92, 246, 0.2) !important;
}

/* Secondary button (Schedule demo, outlined) */
.elementor-element a[href*="demo"],
.elementor-element a[href*="schedule"],
.soraco-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 24px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--soraco-text-primary) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.elementor-element a[href*="demo"]:hover,
.elementor-element a[href*="schedule"]:hover,
.soraco-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ============================================
   PRICING CARDS
   ============================================ */

/* Standard pricing card */
.soraco-edition-card {
  background-color: var(--soraco-bg-card) !important;
  border: 1px solid var(--soraco-border) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  transition: all 0.3s ease !important;
}

.soraco-edition-card:hover {
  border-color: var(--soraco-border-hover) !important;
  box-shadow: 0 10px 40px -10px rgba(139, 92, 246, 0.2) !important;
}

/* Highlighted pricing card (Professional) */
.soraco-edition-card-highlight {
  background-color: rgba(139, 92, 246, 0.15) !important;
  border: 2px solid var(--soraco-purple-500) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  box-shadow: 0 20px 50px -10px rgba(139, 92, 246, 0.3) !important;
  position: relative !important;
}

/* Buy Now button in pricing cards */
.soraco-edition-card a[href*="product"],
.soraco-edition-card a[href*="buy"] {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  transform: translateY(0) !important;
}

.soraco-edition-card a[href*="product"]:hover,
.soraco-edition-card a[href*="buy"]:hover {
  transform: translateY(-2px) !important;
}

/* Standard edition button (outlined) */
.soraco-edition-card:not(.soraco-edition-card-highlight) a[href*="product"],
.soraco-edition-card:not(.soraco-edition-card-highlight) a[href*="buy"] {
  background: transparent !important;
  border: 1px solid var(--soraco-border) !important;
  color: var(--soraco-purple-300) !important;
}

.soraco-edition-card:not(.soraco-edition-card-highlight) a[href*="product"]:hover,
.soraco-edition-card:not(.soraco-edition-card-highlight) a[href*="buy"]:hover {
  border-color: var(--soraco-border-hover) !important;
  background: rgba(139, 92, 246, 0.1) !important;
}

/* Highlighted edition button (gradient) */
.soraco-edition-card-highlight a[href*="product"],
.soraco-edition-card-highlight a[href*="buy"] {
  background: linear-gradient(90deg, var(--soraco-purple-500), var(--soraco-blue-500)) !important;
  color: var(--soraco-text-primary) !important;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4) !important;
}

/* ============================================
   FEATURE TAGS (E-commerce, Portal, Mobile)
   ============================================ */

.soraco-feature-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 50px !important;
  background: rgba(139, 92, 246, 0.15) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--soraco-purple-300) !important;
  margin-bottom: 16px !important;
}

/* ============================================
   LICENSE MODEL PILLS
   ============================================ */

.soraco-model-pill {
  display: inline-block !important;
  padding: 6px 16px !important;
  border-radius: 50px !important;
  background: rgba(139, 92, 246, 0.1) !important;
  border: 1px solid var(--soraco-border) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--soraco-purple-200) !important;
}

/* ============================================
   LINKS
   - Color transition on hover
   ============================================ */

/* General links */
.elementor-element a {
  transition: color 0.2s ease !important;
}

/* Underlined links (like "Read more") */
a[style*="underline"],
.soraco-link-underline {
  color: var(--soraco-purple-400) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color 0.2s ease !important;
}

a[style*="underline"]:hover,
.soraco-link-underline:hover {
  color: var(--soraco-purple-300) !important;
}

/* Feature list bullet links */
.elementor-icon-list-item a {
  color: var(--soraco-purple-200) !important;
  transition: color 0.2s ease !important;
}

.elementor-icon-list-item a:hover {
  color: var(--soraco-purple-300) !important;
}

/* ============================================
   ICON LIST (checkmarks)
   ============================================ */

.elementor-icon-list-icon i {
  color: var(--soraco-purple-400) !important;
}

.elementor-icon-list-text {
  color: var(--soraco-purple-200) !important;
}

/* ============================================
   IMAGES
   - Shadow and border radius
   ============================================ */

.elementor-element img {
  border-radius: 16px !important;
}

.elementor-element[data-id*="image"] img,
.elementor-element[data-id*="hero-image"] img,
.elementor-element[data-id*="ecom-image"] img,
.elementor-element[data-id*="portal-image"] img,
.elementor-element[data-id*="mobile-image"] img {
  border-radius: 16px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

/* Headings */
.elementor-heading-title {
  color: var(--soraco-text-primary) !important;
}

/* Section labels (uppercase) */
.elementor-element p[style*="uppercase"],
.soraco-section-label {
  color: var(--soraco-purple-300) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 14px !important;
}

/* Body text */
.elementor-text-editor p {
  color: var(--soraco-text-secondary) !important;
}

/* ============================================
   FOOTER
   ============================================ */

.elementor-section[data-id="footer-section"] {
  background-color: var(--soraco-bg-dark) !important;
  border-top: 1px solid var(--soraco-border) !important;
}

.elementor-section[data-id="footer-section"] a {
  color: var(--soraco-text-muted) !important;
  transition: color 0.2s ease !important;
}

.elementor-section[data-id="footer-section"] a:hover {
  color: var(--soraco-purple-400) !important;
}

.elementor-section[data-id="footer-section"] h3,
.elementor-section[data-id="footer-section"] h4 {
  color: var(--soraco-text-primary) !important;
}

/* ============================================
   FULL WIDTH / LAYOUT FIXES
   ============================================ */

.elementor-section.elementor-section-full_width {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.elementor-section.elementor-section-full_width > .elementor-container {
  max-width: 100% !important;
}

body.elementor-page .site-content,
body.elementor-page .content-area,
body.elementor-page article {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================
   MANAGED HOSTING BOX
   ============================================ */

.soraco-hosting-box,
.elementor-element[data-id="hosting-box"] .elementor-widget-container {
  background-color: var(--soraco-bg-card) !important;
  border: 1px solid var(--soraco-border) !important;
  border-radius: 16px !important;
  padding: 32px !important;
}

/* ============================================
   CTA SECTION (Start protecting today)
   ============================================ */

.elementor-section[data-id="cta-section"] {
  background: linear-gradient(135deg, #1a1033 0%, #0f0e2d 50%, #0b1020 100%) !important;
}

/* ============================================
   HERO BADGE
   ============================================ */

.soraco-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(167, 139, 250, 0.3) !important;
  background: rgba(139, 92, 246, 0.1) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--soraco-purple-300) !important;
}

.soraco-hero-badge::before {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--soraco-purple-400) !important;
}

/* ============================================
   BUTTON HOVER EFFECTS (CSS-only fallback)
   ============================================ */

.soraco-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 25px -5px rgba(139, 92, 246, 0.4),
              0 10px 10px -5px rgba(139, 92, 246, 0.2) !important;
}

.soraco-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ============================================
   LANGUAGE CHIP HOVER EFFECTS (CSS-only fallback)
   ============================================ */

.soraco-lang-chip:hover {
  background: rgba(139, 92, 246, 0.2) !important;
  color: #c4b5fd !important;
}

/* ============================================
   APP CHIP HOVER EFFECTS (CSS-only fallback)
   ============================================ */

.soraco-app-chip:hover {
  background: rgba(99, 102, 241, 0.25) !important;
  color: #c7d2fe !important;
}

/* ============================================
   ICON LIST LINK HOVER
   ============================================ */

.elementor-icon-list-item a:hover {
  color: var(--soraco-purple-300) !important;
}

/* ============================================
   FOOTER LINK HOVER
   ============================================ */

.elementor-section[data-id="footer-section"] a:hover,
.elementor-section[data-id="footer-bottom"] a:hover {
  color: var(--soraco-purple-400) !important;
}

/* ============================================
   CONSISTENT SECTION BACKGROUNDS
   (all sections use same color)
   ============================================ */

.elementor-section {
  background-color: #1a1a3e !important;
}

/* ============================================
   ICON-BOX PLATFORM CARDS STYLING
   (Desktop apps, Web services, Mobile apps, Productivity add-ins)
   ============================================ */

.elementor-element[data-id*="cp-card"] .elementor-icon-box-wrapper,
.elementor-element[data-id*="cp-card"] .elementor-widget-icon-box {
  background: rgba(139, 92, 246, 0.1) !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  border-radius: 16px !important;
  padding: 24px !important;
}

.elementor-element[data-id*="cp-card"] .elementor-icon-box-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #f3e8ff !important;
}

.elementor-element[data-id*="cp-card"] .elementor-icon {
  font-size: 28px !important;
  color: #c4b5fd !important;
}

.elementor-element[data-id*="cp-card"] .elementor-icon i {
  font-size: 28px !important;
}

/* ============================================
   FORCE FONT AWESOME LOADING
   (ensure icons render in Elementor)
   ============================================ */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* ============================================
   CHECK ICONS (for pricing cards)
   ============================================ */

.fas.fa-check {
  font-size: 14px !important;
  color: #a78bfa !important;
}

/* ============================================
   SVG ICONS IN BUTTONS
   ============================================ */

.soraco-btn-primary svg,
.soraco-btn-secondary svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* ============================================
   FEATURE IMAGES - CONSISTENT SIZE
   (all images: max 700x500, fully visible)
   ============================================ */

.soraco-feature-image img,
.elementor-element[data-id="hero-image"] img,
.elementor-element[data-id="ecom-image"] img,
.elementor-element[data-id="portal-image"] img,
.elementor-element[data-id="mobile-image"] img,
.elementor-element[data-id="analytics-image"] img {
  max-width: 700px !important;
  max-height: 500px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 16px !important;
}

/* ============================================
   SOCIAL MEDIA ICONS
   ============================================ */

.soraco-social-icon,
#footer-social a,
[id="footer-social"] a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(139, 92, 246, 0.1) !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  color: #94a3b8 !important;
  transition: all 0.2s ease !important;
}

.soraco-social-icon:hover,
#footer-social a:hover,
[id="footer-social"] a:hover {
  background: rgba(139, 92, 246, 0.2) !important;
  border-color: rgba(139, 92, 246, 0.4) !important;
  color: #c4b5fd !important;
}

/* ============================================
   SUPPORT PAGE CARDS
   ============================================ */

.soraco-support-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 40px 24px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.soraco-support-card:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  box-shadow: 0 10px 40px rgba(139, 92, 246, 0.15) !important;
  transform: translateY(-4px) !important;
}

.soraco-support-card:hover div {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(124, 58, 237, 0.3)) !important;
  border-color: rgba(139, 92, 246, 0.4) !important;
}

.soraco-support-card:hover h3 {
  color: #c4b5fd !important;
}

.soraco-support-card:hover svg {
  stroke: #c4b5fd !important;
}

/* ============================================
   SUPPORT PAGE - ICON BOX HOVER EFFECTS
   ============================================ */

/* Base styles for soraco icon cards */
.soraco-icon-card .elementor-widget-container {
  background: rgba(255, 255, 255, 0.04) !important;
  transition: all 0.3s ease !important;
}

.soraco-icon-card {
  transition: all 0.3s ease !important;
}

/* Card hover - lift, background change, and glow */
.soraco-icon-card:hover {
  transform: translateY(-6px) !important;
}

.soraco-icon-card:hover .elementor-widget-container {
  background: rgba(139, 92, 246, 0.2) !important;
  border-color: rgba(139, 92, 246, 0.6) !important;
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.25) !important;
}

/* Icon circle glow on hover */
.soraco-icon-card:hover .elementor-icon {
  background: rgba(139, 92, 246, 0.35) !important;
  border-color: rgba(139, 92, 246, 0.7) !important;
  transition: all 0.3s ease !important;
}

/* Icon color brighten on hover */
.soraco-icon-card:hover .elementor-icon i,
.soraco-icon-card:hover .elementor-icon svg {
  color: #d8b4fe !important;
  fill: #d8b4fe !important;
}

/* Title color on hover */
.soraco-icon-card:hover .elementor-icon-box-title,
.soraco-icon-card:hover .elementor-icon-box-title a {
  color: #d8b4fe !important;
}

/* ============================================
   REVIEWS PLUGINS DARK THEME STYLING
   ============================================ */

/* WP Business Reviews - Google Reviews */
.wpbr-wrap,
.wpbr-collection {
  background: transparent !important;
}

.wpbr-review {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  transition: all 0.3s ease !important;
}

.wpbr-review:hover {
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.2) !important;
}

.wpbr-review-author,
.wpbr-review-name {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.wpbr-review-text,
.wpbr-review-content {
  color: #94a3b8 !important;
}

.wpbr-review-date,
.wpbr-review-time {
  color: #64748b !important;
}

.wpbr-review-source {
  color: #a78bfa !important;
}

/* Star ratings */
.wpbr-star,
.wpbr-rating-star {
  color: #fbbf24 !important;
}

/* Read more link */
.wpbr-review a,
.wpbr-read-more {
  color: #a78bfa !important;
}

.wpbr-review a:hover,
.wpbr-read-more:hover {
  color: #c4b5fd !important;
}

/* Smash Balloon Custom Facebook Feed */
#cff,
.cff-wrapper,
.cff-feed {
  background: transparent !important;
}

.cff-item,
.cff-post {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  transition: all 0.3s ease !important;
}

.cff-item:hover,
.cff-post:hover {
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.2) !important;
}

.cff-author-name,
.cff-page-name {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.cff-text,
.cff-post-text {
  color: #94a3b8 !important;
}

.cff-date,
.cff-timestamp {
  color: #64748b !important;
}

.cff-post-link,
.cff-view-link {
  color: #a78bfa !important;
}

.cff-post-link:hover,
.cff-view-link:hover {
  color: #c4b5fd !important;
}

/* ============================================
   POSTS WIDGET DARK THEME ENHANCEMENTS
   ============================================ */

/* Ensure posts widget cards have proper styling */
.elementor-posts-container .elementor-post {
  transition: all 0.3s ease !important;
}

.elementor-posts-container .elementor-post:hover {
  transform: translateY(-4px) !important;
}

/* Post title links */
.elementor-post__title a {
  color: #ffffff !important;
  transition: color 0.3s ease !important;
}

.elementor-post__title a:hover {
  color: #c4b5fd !important;
}

/* Post excerpt */
.elementor-post__excerpt {
  color: #94a3b8 !important;
}

/* Read more button */
.elementor-post__read-more {
  color: #a78bfa !important;
  font-weight: 600 !important;
  transition: color 0.3s ease !important;
}

.elementor-post__read-more:hover {
  color: #c4b5fd !important;
}

/* Pagination styling */
.elementor-pagination {
  margin-top: 40px !important;
}

.elementor-pagination .page-numbers {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  color: #a78bfa !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  transition: all 0.3s ease !important;
}

.elementor-pagination .page-numbers:hover,
.elementor-pagination .page-numbers.current {
  background: rgba(139, 92, 246, 0.2) !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
  color: #ffffff !important;
}

/* ============================================
   ELEMENTOR TABS - DARK THEME STYLING
   ============================================ */

.elementor-tabs {
  border: none !important;
}

.elementor-tab-title {
  background: rgba(255, 255, 255, 0.04) !important;
  border: none !important;
  color: #94a3b8 !important;
  padding: 16px 28px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  border-radius: 12px 12px 0 0 !important;
  margin-right: 4px !important;
}

.elementor-tab-title:hover {
  background: rgba(139, 92, 246, 0.1) !important;
  color: #c4b5fd !important;
}

.elementor-tab-title.elementor-active {
  background: rgba(139, 92, 246, 0.2) !important;
  color: #ffffff !important;
  border-bottom: 2px solid #a78bfa !important;
}

.elementor-tab-content {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(139, 92, 246, 0.15) !important;
  border-top: none !important;
  border-radius: 0 12px 12px 12px !important;
  padding: 30px !important;
}

/* ============================================
   ARPRICE PLUGIN - DARK THEME STYLING
   ============================================ */

/* Main container */
.arprice,
.arprice-wrapper,
.ar_pricing_table {
  background: transparent !important;
}

/* Toggle switch styling */
.arprice .ar_toggle_wrap,
.ar_pricing_toggle {
  background: rgba(139, 92, 246, 0.2) !important;
  border-radius: 30px !important;
}

.arprice .ar_toggle_btn,
.ar_pricing_toggle .ar_toggle_active {
  background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
}

.arprice .ar_toggle_label {
  color: #ffffff !important;
}

/* Pricing columns */
.arprice .ar_pricing_column,
.ar_column {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.arprice .ar_pricing_column:hover,
.ar_column:hover {
  background: rgba(139, 92, 246, 0.1) !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.2) !important;
}

/* Column headers */
.arprice .ar_pricing_header,
.ar_column_header {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #ffffff !important;
}

.arprice .ar_pricing_title,
.ar_column_title {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.arprice .ar_pricing_price,
.ar_column_price {
  background: rgba(0, 0, 0, 0.2) !important;
  color: #ffffff !important;
}

/* Feature rows */
.arprice .ar_pricing_row,
.ar_column_row {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #e2e8f0 !important;
}

.arprice .ar_pricing_row:nth-child(even),
.ar_column_row:nth-child(even) {
  background: rgba(255, 255, 255, 0.04) !important;
}

.arprice .ar_pricing_row_title,
.ar_row_title {
  color: #94a3b8 !important;
}

/* Checkmarks and X marks */
.arprice .ar_check,
.ar_yes {
  color: #22c55e !important;
}

.arprice .ar_cross,
.ar_no {
  color: #64748b !important;
}

/* Links in table */
.arprice a,
.ar_pricing_table a {
  color: #38bdf8 !important;
}

.arprice a:hover,
.ar_pricing_table a:hover {
  color: #7dd3fc !important;
}

/* Buy Now buttons */
.arprice .ar_button,
.ar_pricing_button,
.ar_buy_btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  text-transform: none !important;
}

.arprice .ar_button:hover,
.ar_pricing_button:hover,
.ar_buy_btn:hover {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3) !important;
}

/* Featured/highlighted column */
.arprice .ar_featured,
.ar_column_featured {
  border-color: #a78bfa !important;
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.25) !important;
}

/* ============================================
   QLM FEATURES COMPARISON TABLE (ARPrice ID 107)
   ============================================ */

/* Main container styling */
.arp_price_table_107,
#ArpPricingTable_107 {
  background: transparent !important;
}

/* Column headers - Edition names */
.arp_price_table_107 .arpcolumnheader,
.arp_price_table_107 .ArpPricingTableColumnWrapper .arpcolumnheader {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.08)) !important;
  border-bottom: 2px solid rgba(139, 92, 246, 0.3) !important;
}

.arp_price_table_107 .bestPlanTitle {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Feature row labels (left column) */
.arp_price_table_107 .maincaptioncolumn .arp_opt_options li {
  color: #e2e8f0 !important;
  font-weight: 500 !important;
  text-align: left !important;
}

/* Alternating row backgrounds */
.arp_price_table_107 .arp_odd_row {
  background: rgba(26, 26, 62, 0.95) !important;
}

.arp_price_table_107 .arp_even_row {
  background: rgba(31, 30, 77, 0.95) !important;
}

/* All rows text color */
.arp_price_table_107 .arp_opt_options li {
  color: #cbd5e1 !important;
  border-bottom: 1px solid rgba(139, 92, 246, 0.1) !important;
}

/* Checkmark styling (included features) */
.arp_price_table_107 .arp_opt_options li i.fa-check,
.arp_price_table_107 .arp_opt_options li .fa-check-circle,
.arp_price_table_107 .arp_opt_options li .fas.fa-check {
  color: #22c55e !important;
  font-size: 18px !important;
}

/* X mark styling (not included) */
.arp_price_table_107 .arp_opt_options li i.fa-times,
.arp_price_table_107 .arp_opt_options li .fa-times-circle,
.arp_price_table_107 .arp_opt_options li .fas.fa-times {
  color: #64748b !important;
  font-size: 18px !important;
}

/* Links in the table (like Obfuscation popup link) */
.arp_price_table_107 a {
  color: #38bdf8 !important;
  text-decoration: underline !important;
  transition: color 0.2s ease !important;
}

.arp_price_table_107 a:hover {
  color: #7dd3fc !important;
}

/* Popup trigger links */
.arp_price_table_107 .popmake-25982,
.arp_price_table_107 [class*="popmake"] {
  color: #38bdf8 !important;
  cursor: pointer !important;
}

/* Column borders */
.arp_price_table_107 .ArpPricingTableColumnWrapper {
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin: 0 4px !important;
}

/* Hover effect on columns */
.arp_price_table_107 .ArpPricingTableColumnWrapper:hover {
  border-color: rgba(139, 92, 246, 0.4) !important;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15) !important;
}

/* Footer area */
.arp_price_table_107 .arpcolumnfooter {
  background: rgba(139, 92, 246, 0.1) !important;
  border-top: 1px solid rgba(139, 92, 246, 0.2) !important;
}

/* Price display in comparison table */
.arp_price_table_107 .arp_price_wrapper {
  color: #c4b5fd !important;
  font-weight: 600 !important;
}/* End custom CSS */