/*
Theme Name:  Customized Aitechfy Theme
Theme URI:   https://syncrobytex.com/
Author:      Themexriver & SyncrobyteX
Author URI:  https://syncrobytex.com/
Description: Customized Aitechfy theme with advanced modifications.
Version:     1.0.0
Template:    aitechfy
Text Domain: aitechfy-child
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/*
 * All custom CSS goes here.
 * Color overrides are injected dynamically via the Customizer (see inc/dynamic-colors.php).
 */

/* =================================================================
   SYNCROBYTEX BRAND PALETTE — Root variable overrides
   These override the parent theme's purple/pink defaults globally.
   ================================================================= */
:root {
  /* ── Core brand colours ──────────────────────────── */
  --at-black1: #020617; /* was #07000E  → brand main dark */

  /* ── Named colour slots ──────────────────────────── */
  --at-c1: #f97316; /* Orange CTA   (unchanged — kept for buttons) */
  --at-c2: #38bdf8; /* Soft Blue Glow */
  --at-c3: #0369a1; /* Primary Dark */
  --at-c4: #0369a1; /* Primary Dark (was purple #6C1AFC) */
  --at-c5: #0ea5e9; /* Primary Blue (was pinkish #EC736C) */
  --at-c6: #0ea5e9; /* Primary Blue (was #EC04FB) */
  --at-c7: #22d3ee; /* Cyan Accent  (was #5259EB) */
  --at-c8: #0369a1;
  --at-c9: #0ea5e9;
  --at-c10: #22d3ee;

  /* ── Gradient presets ────────────────────────────── */
  --at-prime-c1: linear-gradient(
    90deg,
    #f97316 0%,
    #0ea5e9 51.47%,
    #0369a1 100%
  );
  --at-prime-c2: linear-gradient(90deg, #0369a1 0%, #0ea5e9 100%);
  --at-prime-c3: linear-gradient(90deg, #0ea5e9 0%, #22d3ee 100%);
  --at-prime-c4: linear-gradient(90deg, #0369a1 0%, #0ea5e9 50%, #22d3ee 100%);

  /* ── Subtitle badge custom properties ───────────── */
  --at-subtitle-color: #0ea5e9;
  --at-subtitle-bg: rgba(14, 165, 233, 0.18);
  --at-subtitle-bg-end: rgba(14, 165, 233, 0);

  /* ── Background shades ───────────────────────────── */
  --at-body-c3: #94a3b8; /* muted text (was #5F5D61) */
  --syncx-bg-main: #020617;
  --syncx-bg-sec: #0b1120;
  --syncx-bg-card: #0f172a;
  --syncx-border: #1e293b;
  --syncx-text: #f8fafc;
  --syncx-text-sec: #cbd5e1;
  --syncx-text-mute: #94a3b8;
}

/* =================================================================
   SERVICE SECTION — Replace hardcoded hex values with CSS variables
   so Customizer color pickers actually take effect.
   ================================================================= */

/* Subtitle badge — all three title styles */
.at-sec-title2 .subtitle {
  color: var(--at-subtitle-color, #0ea5e9) !important;
  background: linear-gradient(
    90deg,
    var(--at-subtitle-bg, rgba(14, 165, 233, 0.18)) 0%,
    var(--at-subtitle-bg-end, rgba(14, 165, 233, 0)) 100%
  ) !important;
}

/* Service Style 2 — section background */
.at-ser3-sec {
  background-color: var(--at-ser-section-bg, #f0f2f4) !important;
}

/* Service Style 2 — hover card overlay background */
.at-ser3-item .hover-item {
  background-color: var(--at-ser-hover-bg, var(--at-black1));
}
.at-ser3-item .front-item .item-img:before {
  background-color: var(--at-ser-hover-bg, var(--at-black1));
}

/* Service Style 2 — arrow button: brand gradient */
.at-ser3-item .hover-item .item-img .item-arrow a {
  background: linear-gradient(
    180deg,
    var(--at-arrow-top, #0369a1) 0%,
    var(--at-arrow-mid1, #0b1120) 0.01%,
    var(--at-arrow-mid2, #0b1120) 40%,
    var(--at-arrow-end, #020617) 100%
  );
  border-color: var(--at-ser-hover-bg, var(--at-black1));
}

/* Header nav gradient */
.at-header-section:is(.header_style_one) .at-header-nav:before {
  background: linear-gradient(
    90deg,
    var(--at-c3) 0%,
    var(--at-c2) 48.53%,
    var(--at-c1) 100%
  );
}

/* Step/Service Style 1 — subtitle dots */
.at-sec-title1 .subtitle:before,
.at-sec-title1 .subtitle:after {
  background: linear-gradient(90deg, var(--at-c1) 0%, var(--at-c1) 100%);
}

/* Count sub color in about section */
.at-ab1-count-item .item-count h3 sub {
  color: var(--at-subtitle-color, #0ea5e9);
}

/* Scroll-up button */
.at-scrollup {
  background: var(--at-prime-c1);
}
.at-scrollup:is(.ver_2) {
  background: var(--at-prime-c4);
}

/* =================================================================
   GLOBAL HARDCODED COLOUR PATCHES
   Override any remaining hardcoded purple/pink values in the
   parent theme that are not controlled by CSS variables.
   ================================================================= */

/* FAQ accordion active toggle button (was purple gradient) */
.at-faq1-content .accordion-button:not(.collapsed):after {
  background: linear-gradient(180deg, #0369a1 0%, #0b1120 40%, #020617 100%);
}

/* FAQ image card shadow layers (was purple gradient) */
.at-faq1-content .accordion-body .bi-faq-text .item-img:before {
  background-color: #0ea5e9;
}
.at-faq1-content .accordion-body .bi-faq-text .item-img:after {
  background: linear-gradient(180deg, #0369a1 0%, #0b1120 40%, #020617 100%);
}

/* Pricing toggle track */
.at-price3-btn-grp .toggle {
  background: rgba(14, 165, 233, 0.12);
}

/* Pricing button */
.at-price3-card .item-list .item-btn a {
  background-color: #22d3ee;
}
.at-price3-card .item-list .item-btn a:before {
  background: linear-gradient(135deg, #0ea5e9, #22d3ee);
}

/* Currency symbol (was #EC04FB) */
.at-price3-card .item-price sub {
  color: #0ea5e9;
}
/* About Style 3 — bg overlay (overrides SCSS build output) */
.at-why-c3-content .at-why-c3-bg:before {
  background:
    linear-gradient(257deg, #020617 0%, #0b1120 35%, #0369a1 70%, #0ea5e9 100%),
    linear-gradient(0deg, rgba(2, 6, 23, 0.75), rgba(2, 6, 23, 0.75)) !important;
}
/* =================================================================
   INLINE SVG FILL OVERRIDES
   Elementor page content stores inline fill="#5259EB" (purple) in
   SVG elements. CSS overrides SVG presentation attributes so these
   rules replace all instances without a database search-replace.
   ================================================================= */
path[fill="#5259EB"],
path[fill="#5259eb"],
path[fill="#5259Eb"],
circle[fill="#5259EB"],
circle[fill="#5259eb"],
rect[fill="#5259EB"],
rect[fill="#5259eb"],
polygon[fill="#5259EB"],
polygon[fill="#5259eb"] {
  fill: #22d3ee !important;
}

/* Catch other bad purple/pink SVG fills if they ever appear */
path[fill="#771A99"],
path[fill="#771a99"],
path[fill="#BD6FFD"],
path[fill="#bd6ffd"],
path[fill="#6C1AFC"],
path[fill="#6c1afc"],
path[fill="#EC04FB"],
path[fill="#ec04fb"],
path[fill="#7512A2"],
path[fill="#7512a2"],
path[fill="#FF31AB"],
path[fill="#ff31ab"],
path[fill="#89309E"],
path[fill="#89309e"],
path[fill="#F8B6BC"],
path[fill="#f8b6bc"] {
  fill: var(--primary, #0ea5e9) !important;
}

/* ================================================================
   RGB COLOR OVERRIDES — Elementor inline styles with bad pink/purple
   These colors appear in Elementor cached CSS and inline style attributes.
   ================================================================ */
[style*="rgb(238,44,130)"],
[style*="rgb(238, 44, 130)"],
[style*="rgb(207,42,186)"],
[style*="rgb(207, 42, 186)"],
[style*="rgb(199,81,192)"],
[style*="rgb(199, 81, 192)"],
[style*="rgb(155,81,224)"],
[style*="rgb(155, 81, 224)"],
[style*="rgb(162,52,253)"],
[style*="rgb(162, 52, 253)"],
[style*="rgb(152,150,240)"],
[style*="rgb(152, 150, 240)"],
[style*="rgb(151,120,209)"],
[style*="rgb(151, 120, 209)"],
[style*="rgb(107,0,62)"],
[style*="rgb(107, 0, 62)"] {
  background-color: #22d3ee !important;
  background: linear-gradient(135deg, #0ea5e9, #22d3ee) !important;
  color: #fff !important;
  border-color: #22d3ee !important;
}

/* ── Image Only Mode — Project Cards (Style 2) ─────── */
.at-img-only-mode { --card-gap: inherit; }
.at-img-only-card .item-inner {
}
.at-img-only-card .item-img-only {
    width: 100%;
    line-height: 0;
    border-radius: 12px;
    overflow: hidden;
}
.at-img-only-card .item-img-only img,
.at-img-only-card .item-img-only picture img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset;
}
.at-img-only-card .item-img-only a {
    display: block;
    line-height: 0;
}