/*
  nexzehn Brand Color Overrides
  ------------------------------
  Load this file AFTER main.css.
  It fixes leftover hardcoded colors (old accent #384bff / rgba(56,75,255,*),
  #5e5ef6, #3C72FC, #6324B3, #FF8C22, #15067D, #002B98) so everything matches
  your blue/gold nexzehn palette defined in main.css :root.
*/

:root {
    /* ========== nexzehn Brand Colors ========== */
    /* Blue Palette */
    --blue-highlight: #29ABE2;
    --blue-mid: #1565C0;
    --blue-deep: #0D2E6B;
    --blue-shadow: #0A1F4D;

    /* Gold Palette */
    --gold-highlight: #FFD966;
    --gold-mid: #E8A317;
    --gold-deep: #B8720A;
    --gold-shadow: #8B5A00;

    /* ========== Theme Mapping ========== */
    --body: #fff;
    --black: #000;
    --white: #fff;
    --theme: #1565C0;
    /* Primary — Blue Mid */
    --theme2: #0D2E6B;
    /* Secondary — Blue Deep */
    --theme-color3: #E8A317;
    /* Accent — Gold Mid */
    --header: #0A1F4D;
    /* Header — Blue Shadow */
    --text: #4A5568;
    /* Body Text */
    --text-2: rgba(255, 255, 255, 0.85);
    --border: #D1DAE8;
    --border2: #1A3A6E;
    --border3: #29ABE2;
    /* Border Accent — Blue Highlight */
    --bg: #F0F4FA;
    /* Light Background */
    --bg2: #0D2E6B;
    /* Dark Background — Blue Deep */
    --bg3: rgba(255, 255, 255, 0.2);
    --title-color: #0A1F4D;
    /* Heading Color — Blue Shadow */
    --body-color: #ffffff;
    --smoke-color: #F0F4FA;
    --smoke-color2: #C5D4EC;
    --smoke-color3: #F5F7FB;
    --smoke-color4: #D8E0ED;
    --black-color: #000000;
    --gray-color: #F3F5F9;
    --white-color: #ffffff;
    --light-color: #A8B5C8;
    --text-color: #3D4F6F;
    --text-color2: #4A5A78;
    --border-color: #C5D4EC;

    /* ========== Fonts ========== */
    --title-font: "Rajdhani", sans-serif;
    --body-font: "Plus Jakarta Sans", sans-serif;
    --icon-font: "Font Awesome 6 Pro";

    /* ========== Layout ========== */
    --main-container: 1410px;
    --container-gutters: 30px;
    --section-space: 120px;
    --section-space-mobile: 80px;
    --section-title-space: 60px;
    --ripple-ani-duration: 5s;

    /* ========== Shadows ========== */
    --box-shadow: 0px 4px 25px rgba(10, 31, 77, 0.06);
    --box-shadow-2: 0px 4px 25px rgba(21, 101, 192, 0.12);
}

/* ---- Bug fix: literal "theme-color" keyword was used instead of a variable ---- */
.header-top-wrapper .top-right .flag-wrap .nice-select::after {
    border-right: 2px solid var(--theme);
}

/* ---- Header border tint ---- */
.header-main.style-2 {
    border-color: rgba(21, 101, 192, 0.3);
    /* was rgba(56,75,255,0.3) */
}

/* ---- Offer icon gradient (was blue #3C72FC -> near-black) ---- */
.offer-items .icon {
    background: linear-gradient(180deg, var(--blue-highlight) -210.71%, var(--blue-shadow) 100%);
}

/* ---- Homemenu thumbnail hover overlay (was #5e5ef6) ---- */
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb::before,
.mean-container .mean-nav>ul .homemenu-items .homemenu .homemenu-thumb::before {
    background: linear-gradient(to bottom, rgba(13, 46, 107, 0) 0%, var(--theme) 100%);
}

/* ---- Breadcrumb hero overlay (was #002B98 -> #00060C) ---- */
.breadcrumb-wrapper::before {
    background-image: linear-gradient(270.07deg, var(--blue-deep) 0.07%, var(--blue-shadow) 99.95%);
}

/* ---- Service card style-3 gradient: now blends brand Blue -> Gold ---- */
.service-box-items.style-3::before {
    background: linear-gradient(180deg, var(--theme) -23.85%, var(--gold-mid) 100%);
}

/* ---- Pricing "active" tag: swapped orange (#FF8C22) for brand gold ---- */
.pricing-items.active .tag {
    background-color: var(--gold-mid);
}

.pricing-items.active .tag::before {
    border-top-color: var(--theme);
}

/* ---- Dark purple section overlays (#15067D) -> brand blue-deep ---- */
.project-section-3::before,
.tesimonial-section-2::before {
    background: var(--blue-deep);
}

/* ---- Testimonial card shadows (were purple rgba(98,34,204,*)) ---- */
.testimonial-card.style1,
.testimonial-card.style2,
.testimonial-card.style3 {
    box-shadow: 0px 4px 25px 0px rgba(13, 46, 107, 0.08);
}

/* ---- Ripple / glow effects tinted with old accent color ---- */
.ripple::before,
.ripple::after {
    box-shadow: 0 0 0 0 rgba(21, 101, 192, 0.2);
}

.about-wrapper-2 .about-image .video-box .ripple::before,
.about-wrapper-2 .about-image .video-box .ripple::after,
.title-video-box .ripple::before,
.title-video-box .ripple::after {
    box-shadow: 0 0 0 0 rgba(21, 101, 192, 0.8);
}

.arrow-btn .style1 {
    box-shadow: 0px 4px 25px 0px rgba(21, 101, 192, 0.08);
}

.pricing-card.style3 .pricing-card_header .item .save-btn {
    background: rgba(21, 101, 192, 0.12);
}

/* ---- nexzehn brand tag chips: were hardcoded #384bff ---- */
.nexzehn-brand-tags span {
    color: var(--theme);
}

.nexzehn-service-tags-scroll span:hover {
    background: var(--theme);
    border-color: var(--theme);
    box-shadow: 0 8px 24px rgba(21, 101, 192, 0.18);
}

/* ---- Optional: give the gold palette a visible presence too ----
   (currently your CSS only really uses --theme / --theme2; these
   utility classes let you sprinkle the gold accent where you want it) */
.text-gold {
    color: var(--gold-mid) !important;
}

.bg-gold {
    background-color: var(--gold-mid) !important;
}

.border-gold {
    border-color: var(--gold-mid) !important;
}