/* ============================================================
   EOMSBD — Ultra-Premium Dark Theme
   #0a0a1a | Electric Blue #00d4ff | Royal Purple #8b00ff
   ============================================================ */

:root {
    --bg:        #0a0a1a;
    --bg2:       #0d0d24;
    --card:      rgba(255,255,255,0.04);
    --card-b:    rgba(255,255,255,0.08);
    --blue:      #00d4ff;
    --purple:    #8b00ff;
    --gradient:  linear-gradient(135deg, #00d4ff, #8b00ff);
    --grad-text: linear-gradient(135deg, #00d4ff 0%, #8b00ff 100%);
    --text:      #e2e8f0;
    --muted:     #94a3b8;
    --border:    rgba(255,255,255,0.08);
    --glow-blue: 0 0 20px rgba(0,212,255,0.4), 0 0 60px rgba(0,212,255,0.15);
    --glow-pur:  0 0 20px rgba(139,0,255,0.4), 0 0 60px rgba(139,0,255,0.15);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: 'Josefin Sans', sans-serif !important;
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 { color: #f1f5f9 !important; }
p, li, span, label { color: var(--muted) !important; }
a { color: var(--text) !important; }
a:hover { color: var(--blue) !important; text-decoration: none; }
hr { border-color: var(--border) !important; }

/* ── Gradient Text Utility ── */
.grad-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Neon Glow Utility ── */
.neon-blue { text-shadow: 0 0 20px var(--blue), 0 0 40px rgba(0,212,255,0.4); }
.neon-pur  { text-shadow: 0 0 20px var(--purple), 0 0 40px rgba(139,0,255,0.4); }

/* ── Glassmorphism Card ── */
.glass {
    background: var(--card) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
}
.glass:hover {
    background: var(--card-b) !important;
    border-color: rgba(0,212,255,0.25) !important;
    box-shadow: var(--glow-blue) !important;
    transform: translateY(-4px);
    transition: all 0.35s ease;
}

/* ══════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════ */
section,
.section-padding,
.bg-gray,
.about, .intro,
.video-wrapper,
.clients-section,
.testimonials,
.pricing,
.portfolio,
.team,
.blog,
.services-section,
.web_pro_section,
.package_section,
.ecom_section {
    background: var(--bg) !important;
}

.bg-gray,
.section-padding.bg-gray {
    background: var(--bg2) !important;
}

/* ══════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════ */
.main_nav {
    background: transparent !important;
}
.main_nav_bg {
    background: rgba(10,10,26,0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 4px 32px rgba(0,0,0,0.5) !important;
}
.main_nav_bg .mn_container ul li a { color: #cbd5e1 !important; }
.main_nav_bg .mn_container ul li a:hover { color: var(--blue) !important; }
.mn_mega_menu {
    background: #060614 !important;
    border-top: 2px solid var(--blue) !important;
}
.mn_mega_menu ul li a { color: var(--muted) !important; }
.mn_mega_menu ul li a:hover { color: var(--blue) !important; }

.topnav .whitespace { background: var(--bg) !important; }
.hamenu { background: #060614 !important; }
.hamenu .menu-links .main-menu > li > a,
.hamenu .sub-menu li a { color: var(--text) !important; }
.mobile_menu { background: #060614 !important; }
.mobile_menu .mm_head, .mobile_menu .mm_items ul li a,
.mobile_menu .mm_footer ul li a { color: var(--text) !important; }

/* ══════════════════════════════════════════
   HERO — Stars Canvas
══════════════════════════════════════════ */
.prem-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--bg) !important;
}
#stars-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.prem-hero__content {
    position: relative;
    z-index: 2;
    padding: 120px 0 80px;
}
.prem-hero__label {
    display: inline-block;
    background: rgba(0,212,255,0.1);
    border: 1px solid rgba(0,212,255,0.3);
    color: var(--blue) !important;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 24px;
}
.prem-hero__h1 {
    font-size: clamp(2.4rem, 6vw, 5rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: #fff !important;
    margin-bottom: 20px;
}
.prem-hero__typed {
    font-size: clamp(1rem, 2vw, 1.4rem) !important;
    color: var(--muted) !important;
    margin-bottom: 32px;
    min-height: 2em;
}
.prem-hero__typed .accent { color: var(--blue) !important; }
.prem-hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.btn-prem-wa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff !important;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(37,211,102,0.35);
}
.btn-prem-wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(37,211,102,0.5);
    color: #fff !important;
}
.btn-prem-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--blue) !important;
    padding: 13px 28px;
    border-radius: 50px;
    border: 2px solid var(--blue);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s;
}
.btn-prem-outline:hover {
    background: var(--blue);
    color: #0a0a1a !important;
    box-shadow: var(--glow-blue);
    transform: translateY(-2px);
}

/* ── Gradient orbs behind hero ── */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.25;
    pointer-events: none;
    z-index: 1;
}
.hero-orb-1 {
    width: 500px; height: 500px;
    background: var(--blue);
    top: -100px; right: -100px;
}
.hero-orb-2 {
    width: 400px; height: 400px;
    background: var(--purple);
    bottom: -50px; left: -80px;
}

/* ══════════════════════════════════════════
   TRUST BAR
══════════════════════════════════════════ */
.trust-bar {
    background: rgba(255,255,255,0.03) !important;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 28px 0;
}
.trust-bar__item {
    text-align: center;
    padding: 8px 0;
}
.trust-bar__num {
    font-size: 2rem;
    font-weight: 700;
    background: var(--grad-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1;
}
.trust-bar__label {
    font-size: 0.78rem;
    color: var(--muted) !important;
    letter-spacing: 0.06em;
    margin-top: 4px;
    display: block;
}

/* ══════════════════════════════════════════
   SECTION HEADER
══════════════════════════════════════════ */
.prem-section-tag {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--blue) !important;
    margin-bottom: 12px;
}
.prem-h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    line-height: 1.2 !important;
}

/* ══════════════════════════════════════════
   SERVICES — Glass Cards
══════════════════════════════════════════ */
.prem-services { padding: 100px 0; }
.prem-service-card {
    background: var(--card) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 32px 28px;
    height: 100%;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}
.prem-service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gradient);
    opacity: 0;
    transition: opacity 0.3s;
}
.prem-service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0,212,255,0.2) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 30px rgba(0,212,255,0.1) !important;
}
.prem-service-card:hover::before { opacity: 1; }
.prem-service-icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: rgba(0,212,255,0.1);
    border: 1px solid rgba(0,212,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    color: var(--blue) !important;
    margin-bottom: 20px;
}
.prem-service-card h4 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #f1f5f9 !important;
    margin-bottom: 12px;
}
.prem-service-card p {
    font-size: 0.88rem;
    color: var(--muted) !important;
    line-height: 1.65;
    margin: 0;
}
.prem-service-card .btn-link-prem {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blue) !important;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none !important;
    margin-top: 20px;
    transition: gap 0.2s;
}
.prem-service-card .btn-link-prem:hover { gap: 10px; }

/* ══════════════════════════════════════════
   PROBLEM → SOLUTION
══════════════════════════════════════════ */
.prob-sol { padding: 80px 0; background: var(--bg2) !important; }
.prob-col, .sol-col {
    border-radius: 16px;
    padding: 36px;
}
.prob-col {
    background: rgba(239,68,68,0.06) !important;
    border: 1px solid rgba(239,68,68,0.15) !important;
}
.sol-col {
    background: rgba(0,212,255,0.05) !important;
    border: 1px solid rgba(0,212,255,0.15) !important;
}
.prob-col h4 { color: #f87171 !important; }
.sol-col h4 { color: var(--blue) !important; }
.prob-item, .sol-item {
    display: flex; gap: 12px; align-items: flex-start;
    margin-bottom: 14px;
}
.prob-item i { color: #f87171 !important; margin-top: 3px; flex-shrink: 0; }
.sol-item i { color: #4ade80 !important; margin-top: 3px; flex-shrink: 0; }
.prob-item p, .sol-item p { margin: 0 !important; font-size: 0.9rem; }

/* ══════════════════════════════════════════
   PRICING
══════════════════════════════════════════ */
.prem-pricing { padding: 100px 0; }
.pricing-card {
    background: var(--card) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    padding: 40px 32px;
    text-align: center;
    transition: all 0.35s;
    position: relative;
    overflow: hidden;
    height: 100%;
}
.pricing-card.popular {
    border-color: var(--blue) !important;
    box-shadow: var(--glow-blue) !important;
}
.pricing-card.popular::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: 16px; right: -28px;
    background: var(--gradient);
    color: #fff !important;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 5px 40px;
    transform: rotate(45deg);
}
.pricing-card:hover {
    transform: translateY(-8px);
    border-color: var(--blue) !important;
    box-shadow: var(--glow-blue) !important;
}
.pricing-tier {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--blue) !important;
    margin-bottom: 12px;
}
.pricing-price {
    font-size: 2.4rem;
    font-weight: 700;
    color: #f1f5f9 !important;
    line-height: 1;
    margin-bottom: 4px;
}
.pricing-price span { font-size: 1rem; color: var(--muted) !important; }
.pricing-features {
    list-style: none;
    padding: 0; margin: 24px 0;
    text-align: left;
}
.pricing-features li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
    color: var(--muted) !important;
    display: flex; gap: 10px; align-items: center;
}
.pricing-features li i { color: var(--blue) !important; flex-shrink: 0; }
.btn-pricing {
    display: block;
    width: 100%;
    padding: 13px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none !important;
    transition: all 0.3s;
    text-align: center;
}
.btn-pricing-outline {
    border: 2px solid var(--blue);
    color: var(--blue) !important;
}
.btn-pricing-outline:hover {
    background: var(--blue);
    color: #0a0a1a !important;
    box-shadow: var(--glow-blue);
}
.btn-pricing-solid {
    background: var(--gradient);
    color: #fff !important;
    border: none;
}
.btn-pricing-solid:hover {
    box-shadow: var(--glow-blue);
    transform: translateY(-2px);
    color: #fff !important;
}

/* ══════════════════════════════════════════
   TECH STACK
══════════════════════════════════════════ */
.tech-stack { padding: 80px 0; background: var(--bg2) !important; }
.tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text) !important;
    margin: 6px;
    transition: all 0.3s;
}
.tech-badge:hover {
    border-color: var(--blue) !important;
    color: var(--blue) !important;
    box-shadow: 0 0 16px rgba(0,212,255,0.2);
    transform: translateY(-2px);
}
.tech-badge i { color: var(--blue) !important; }

/* ══════════════════════════════════════════
   PROCESS — HOW WE WORK
══════════════════════════════════════════ */
.prem-process { padding: 100px 0; }
.process-step {
    text-align: center;
    padding: 32px 20px;
    position: relative;
}
.process-num {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--gradient);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff !important;
    margin: 0 auto 20px;
    box-shadow: var(--glow-blue);
}
.process-step h4 { color: #f1f5f9 !important; font-size: 1.1rem !important; margin-bottom: 10px; }
.process-step p { font-size: 0.88rem; color: var(--muted) !important; max-width: 220px; margin: 0 auto; }

/* ══════════════════════════════════════════
   FINAL CTA
══════════════════════════════════════════ */
.prem-cta {
    padding: 100px 0;
    background: linear-gradient(135deg, rgba(0,212,255,0.06) 0%, rgba(139,0,255,0.06) 100%) !important;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.prem-cta h2 { font-size: clamp(2rem,4vw,3rem) !important; color: #f1f5f9 !important; }
.prem-cta p { color: var(--muted) !important; font-size: 1rem; max-width: 520px; margin: 0 auto 32px; }

/* ══════════════════════════════════════════
   PACKAGES (existing owl carousel restyled)
══════════════════════════════════════════ */
.package_section { padding: 80px 0; }
.p_box {
    background: var(--card) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 32px 24px !important;
    transition: all 0.35s;
}
.p_box:hover {
    border-color: rgba(0,212,255,0.25) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 30px rgba(0,212,255,0.1) !important;
    transform: translateY(-4px);
}
.p_box .p_title {
    background: var(--grad-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    margin-bottom: 16px !important;
}
.p_box ul li {
    color: var(--muted) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 7px 0 !important;
    font-size: 0.88rem;
}
.p_box ul li b { color: var(--blue) !important; }

/* Owl nav arrows */
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    color: var(--blue) !important;
    border-radius: 50% !important;
    width: 40px; height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.owl-nav button:hover {
    background: var(--blue) !important;
    color: #0a0a1a !important;
    box-shadow: var(--glow-blue) !important;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer { background: #060614 !important; }
footer .call-action { background: var(--bg2) !important; }
footer .call-action h2,
footer .call-action h6,
footer .call-action h2 b { color: #f1f5f9 !important; }
footer .call-action p,
footer .call-action .contact-info p { color: var(--muted) !important; }
footer .fri_box a, footer .fri_box span, footer .fri_box i { color: var(--text) !important; }
footer .footer_social ul li a { color: var(--muted) !important; }
footer .footer_social ul li a:hover { color: var(--blue) !important; }
footer .sub-footer {
    background: #030310 !important;
    border-top: 1px solid var(--border) !important;
}
footer .sub-footer p,
footer .sub-footer p a { color: var(--muted) !important; }
footer .sub-footer p a:hover { color: var(--blue) !important; }

/* ── Forms ── */
.form-control, input[type=text], input[type=email],
input[type=number], textarea, select {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: 8px !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
    color: var(--muted) !important;
}
.form-control:focus, input:focus, textarea:focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(0,212,255,0.12) !important;
    background: rgba(255,255,255,0.06) !important;
    color: var(--text) !important;
}

/* ── Buttons ── */
.btn-curve span, .btn-curve {
    color: #fff !important;
    border-color: var(--blue) !important;
}
.btn-curve:after, .btn-curve:before { background: var(--blue) !important; }
.btn-danger {
    background: var(--gradient) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 28px !important;
}
.btn-danger:hover { box-shadow: var(--glow-blue) !important; }

/* ── Tag badges ── */
.mh-about-tag ul li span {
    background: rgba(0,212,255,0.08) !important;
    color: var(--blue) !important;
    border: 1px solid rgba(0,212,255,0.2) !important;
    border-radius: 50px;
}

/* ── Preloader ── */
#preloader, .loading { background: var(--bg) !important; }

/* ── Scroll progress ── */
.progress-wrap svg path { stroke: var(--blue) !important; }
.progress-wrap { background: var(--card) !important; }

/* ── Scroll reveal utility ── */
[data-prem-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-prem-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .prem-hero__h1 { font-size: 2.2rem !important; }
    .prem-hero__ctas { flex-direction: column; align-items: flex-start; }
    .process-step { padding: 20px 10px; }
}

/* ══════════════════════════════════════════════════════════════
   SERVICE PAGES — Override service/css/style.css
══════════════════════════════════════════════════════════════ */

/* ── Consultancy CTA (was light cyan) ── */
.consultancy {
    background: linear-gradient(135deg, rgba(0,212,255,0.08) 0%, rgba(139,0,255,0.08) 100%) !important;
    border-top: 1px solid rgba(0,212,255,0.2) !important;
    border-bottom: 1px solid rgba(139,0,255,0.2) !important;
}
.consultancy p { color: #f1f5f9 !important; }
.consultancy .custom_button {
    background: linear-gradient(135deg, #00d4ff, #8b00ff) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 24px rgba(0,212,255,0.3) !important;
}
.consultancy .custom_button:hover {
    color: #fff !important;
    box-shadow: 0 8px 32px rgba(0,212,255,0.5) !important;
    transform: translateY(-2px);
}

/* ── Contact Area (was light cyan) ── */
.contact_area {
    background: rgba(0,212,255,0.06) !important;
    border-top: 1px solid rgba(0,212,255,0.15) !important;
    border-bottom: 1px solid rgba(0,212,255,0.15) !important;
    color: #e2e8f0 !important;
}
.contact_area h2, .contact_area .contact { color: #f1f5f9 !important; }

/* ── Promotions (was white) ── */
.promotions { background: var(--bg) !important; }
.pr_box {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(12px) !important;
}
.pr_content h3 { color: #f1f5f9 !important; }
.pr_content p { color: #94a3b8 !important; }

/* ── Section Headings (were dark grey) ── */
.section_title h2 { color: #f1f5f9 !important; }
.section_title h2 span { color: var(--blue) !important; }
.section_title_b { color: #f1f5f9 !important; }
.section_title_b:after { background: var(--blue) !important; }
.section_title_b span { color: var(--blue) !important; }
.section_name span {
    background: rgba(0,212,255,0.08) !important;
    color: var(--blue) !important;
    border: 1px solid rgba(0,212,255,0.2) !important;
    border-radius: 50px;
}

/* ── Testimonials service page (was #F9FBFF) ── */
.s_testimonials {
    background: rgba(255,255,255,0.02) !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}
.s_testimonials .section_name span { background: rgba(0,212,255,0.08) !important; }
.st_box {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
    border-radius: 16px !important;
}
.sth_info { color: #94a3b8 !important; }
.sth_name { color: #f1f5f9 !important; }
.st_content p { color: #94a3b8 !important; line-height: 1.65; }

/* ── Light background sections (F9FBFF / fafafa) ── */
.catalog, .shipping, .faq { background: rgba(255,255,255,0.02) !important; }

/* ── Service Portfolio boxes ── */
.sp_box {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08) !important;
    background: rgba(255,255,255,0.03) !important;
}
.spb_title { color: #f1f5f9 !important; }
.spb_content, .spb_content p { color: #94a3b8 !important; }

/* ── Logos (was blue box-shadow on white) ── */
.logos ul li {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08) !important;
    background: rgba(255,255,255,0.03) !important;
}

/* ── Laravel demos — owl nav buttons (was white) ── */
.l_demos .ld_carousel .owl-nav button.owl-next,
.l_demos .ld_carousel .owl-nav button.owl-prev {
    background: rgba(0,212,255,0.12) !important;
    color: var(--blue) !important;
    box-shadow: none !important;
    border: 1px solid rgba(0,212,255,0.2) !important;
}

/* ── Why EOMSBD card (Laravel page) ── */
.wld_caed {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
}
.wld_caed h3 { color: #f1f5f9 !important; }
.wld_caed p { color: #94a3b8 !important; }

/* ── Service button ── */
.service_button {
    background: var(--gradient) !important;
    color: #fff !important;
    border-radius: 50px !important;
    border: none !important;
}
.service_button:hover { color: #fff !important; opacity: 0.85; }

/* ── Develop boxes ── */
.db_title { color: #f1f5f9 !important; }
.db_title:after { background: var(--blue) !important; }
.d_box p { color: #94a3b8 !important; }

/* ══════════════════════════════════════════════════════════════
   FAQ CSS — Override faq.css
══════════════════════════════════════════════════════════════ */
.accordion_list li {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.accordion_list li button {
    color: #e2e8f0 !important;
    background: transparent !important;
}
.accordion_list li button:hover,
.accordion_list li button:focus {
    color: var(--blue) !important;
    text-decoration: none;
}
.accordion_list li p { color: #94a3b8 !important; }
.clients .brands {
    border: 1px solid rgba(255,255,255,0.07) !important;
}

/* ══════════════════════════════════════════════════════════════
   ABOUT & TEAM CSS — Override about.css
══════════════════════════════════════════════════════════════ */
.team .team-container:after { background: rgba(255,255,255,0.02) !important; }
.team .title h3 { color: rgba(255,255,255,0.15) !important; }
.team .title h3 span { color: var(--blue) !important; }
.team .slick-dots li.slick-active button,
.team .slick-dots li button:before { background: var(--blue) !important; }

.testim-blocks:after { background: rgba(255,255,255,0.02) !important; }
.testim-blocks .navs { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.testim-blocks .navs:after { background: rgba(255,255,255,0.15) !important; }
.testim-blocks .title h6 { color: var(--blue) !important; }
.testim-blocks .item .info { border-left-color: var(--blue) !important; }
.testim-blocks .item .info span { color: #94a3b8 !important; }

/* ══════════════════════════════════════════════════════════════
   PRODUCT PAGE — Override inline styles
══════════════════════════════════════════════════════════════ */
.services .img .rotitle {
    background: linear-gradient(180deg, #00d4ff, #8b00ff) !important;
}
.services-grid .items.active {
    background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(139,0,255,0.15)) !important;
    border: 1px solid rgba(0,212,255,0.25) !important;
    box-shadow: 0 8px 32px rgba(0,212,255,0.15) !important;
}
.services-grid .items.active p { color: #cbd5e1 !important; }
.product_content p { color: #94a3b8 !important; }
.product_content ul li { color: #94a3b8 !important; }

/* ── Banner form contact form dark ── */
.banner_form, .hero-form, #hero-form {
    background: rgba(10,10,26,0.85) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 16px !important;
    padding: 28px !important;
}
.banner_form h3, #hero-form h3 { color: #f1f5f9 !important; }
.btn-primary-color, .btn_submit {
    background: linear-gradient(135deg, #00d4ff, #8b00ff) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
}
.btn-primary-color:hover, .btn_submit:hover {
    box-shadow: 0 4px 20px rgba(0,212,255,0.35) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   SERVICE HEADER — banner items text
══════════════════════════════════════════════════════════════ */
.bannter_content h3 { color: #f1f5f9 !important; }
.bannter_content p { color: #cbd5e1 !important; }

/* ══════════════════════════════════════════════════════════════
   ALL-PORTFOLIO PAGE
══════════════════════════════════════════════════════════════ */
.gallery.portfolio_gallery li .caption { background: rgba(10,10,26,0.92) !important; }
.gallery.portfolio_gallery li .caption h3 a { color: #f1f5f9 !important; }
.gallery.portfolio_gallery li .caption small { color: #94a3b8 !important; }

/* ══════════════════════════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════════════════════════ */
.contact-page .section-head h6 { color: var(--blue) !important; }

/* ══════════════════════════════════════════════════════════════
   BLOG / ARTICLE PAGES
══════════════════════════════════════════════════════════════ */
.blog-pg .item .img img { border-radius: 8px; }
.blog-pg .item .cont h4 a { color: #f1f5f9 !important; }
.blog-pg .item .cont p { color: #94a3b8 !important; }
.blog-pg .item .cont .info span { color: var(--blue) !important; }
.sidebar .widget { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 12px !important; }
.sidebar .widget-title { color: #f1f5f9 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
.sidebar .tags a { background: rgba(0,212,255,0.08) !important; color: var(--blue) !important; border: 1px solid rgba(0,212,255,0.2) !important; border-radius: 50px !important; }

/* ══════════════════════════════════════════════════════════════
   GENERAL REMAINING WHITE/LIGHT ELEMENTS
══════════════════════════════════════════════════════════════ */
.page-header { background-color: var(--bg) !important; }
.white-color h1, .white-color h2, .white-color h3,
.white-color h4, .white-color p, .white-color span { color: #fff !important; }

/* breadcrumb */
.bread { color: #94a3b8 !important; }
.bread a { color: var(--blue) !important; }

/* pagination */
.pagination .page-link {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #e2e8f0 !important;
}
.pagination .page-item.active .page-link {
    background: var(--gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* cards with white bg in any page */
.card, .card-body {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #e2e8f0 !important;
}
.card-title { color: #f1f5f9 !important; }
.card-text { color: #94a3b8 !important; }

/* alert boxes */
.alert-success { background: rgba(74,222,128,0.1) !important; border-color: rgba(74,222,128,0.2) !important; color: #4ade80 !important; }
.alert-danger  { background: rgba(248,113,113,0.1) !important; border-color: rgba(248,113,113,0.2) !important; color: #f87171 !important; }
.alert-info    { background: rgba(0,212,255,0.1) !important; border-color: rgba(0,212,255,0.2) !important; color: var(--blue) !important; }

/* ── Portfolio logo cards (for favicon/logo images) ── */
.port-logo-card {
    display:flex !important;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#07071a 0%,#0f1629 60%,#07071a 100%) !important;
    border:1px solid rgba(0,212,255,.12) !important;
    position:relative;
    overflow:hidden;
    transition:border-color .3s ease, box-shadow .3s ease;
}
.port-logo-card:hover {
    border-color:rgba(0,212,255,.35) !important;
    box-shadow:0 0 30px rgba(0,212,255,.12) !important;
}
.port-logo-card::before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 40%,rgba(0,212,255,.07) 0%,transparent 70%);
    pointer-events:none;
}
.port-logo-card::after {
    content:'';
    position:absolute;
    bottom:0; left:0; right:0;
    height:2px;
    background:linear-gradient(90deg,#00d4ff,#8b00ff);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .4s ease;
}
.port-logo-card:hover::after { transform:scaleX(1); }
.port-logo-inner {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    z-index:1;
    padding:20px;
}
.port-logo-img {
    width:88px !important;
    height:88px !important;
    object-fit:contain !important;
    border-radius:14px;
    padding:10px;
    background:rgba(255,255,255,.08);
    box-shadow:0 4px 24px rgba(0,0,0,.35);
    transition:transform .35s cubic-bezier(.22,.68,0,1.2), box-shadow .35s ease;
}
.port-logo-card:hover .port-logo-img {
    transform:scale(1.1);
    box-shadow:0 8px 32px rgba(0,212,255,.2);
}
.port-logo-domain {
    font-size:.7rem;
    color:rgba(0,212,255,.7);
    letter-spacing:.06em;
    font-family:monospace;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:160px;
}

/* ════════════════════════════════════════════════════════════
   PREMIUM PORTFOLIO REDESIGN
════════════════════════════════════════════════════════════ */
.pf-section{padding:96px 0;background:#07071a;position:relative}
.pf-section::before{content:'';position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:900px;height:450px;background:radial-gradient(ellipse,rgba(0,212,255,.04) 0%,transparent 70%);pointer-events:none}

.pf-eyebrow{display:inline-block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:#00d4ff;margin-bottom:14px;font-weight:600}
.pf-section-title{font-size:clamp(1.9rem,3.5vw,2.7rem)!important;font-weight:700;color:#f1f5f9!important;margin-bottom:14px!important;line-height:1.15!important}
.pf-section-sub{color:#475569;font-size:.88rem;max-width:500px;margin:0 auto}

/* Stats row */
.pf-stats-row{display:flex;justify-content:center;flex-wrap:wrap;border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.02);opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.pf-stats-row.in{opacity:1;transform:translateY(0)}
.pf-stat-box{flex:1;min-width:100px;padding:28px 16px;text-align:center;border-right:1px solid rgba(255,255,255,.06)}
.pf-stat-box:last-child{border-right:none}
.pf-stat-n{font-size:1.9rem;font-weight:700;background:linear-gradient(135deg,#00d4ff,#8b00ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:6px}
.pf-stat-l{font-size:.67rem;color:#475569;text-transform:uppercase;letter-spacing:.1em}

/* Filter pills */
.pf-filter-wrap.filtering{display:flex!important;flex-wrap:wrap;justify-content:center;gap:8px;background:none!important;border:none!important;padding:0!important;margin:0!important;width:auto!important}
.pf-filter-wrap.filtering span{display:inline-flex;align-items:center;padding:8px 18px;border-radius:100px;font-size:.72rem;font-weight:500;letter-spacing:.04em;cursor:pointer;border:1px solid rgba(255,255,255,.1);color:#94a3b8;background:rgba(255,255,255,.03);transition:all .25s ease;white-space:nowrap;margin:0!important;float:none!important}
.pf-filter-wrap.filtering span:hover{border-color:rgba(0,212,255,.35);color:#00d4ff;background:rgba(0,212,255,.08)}
.pf-filter-wrap.filtering span.active{background:linear-gradient(135deg,rgba(0,212,255,.12),rgba(139,0,255,.12));border-color:rgba(0,212,255,.4);color:#00d4ff}

/* Grid */
ul.pf-grid.gallery,ul.pf-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:22px!important;padding:0!important;margin:0!important;list-style:none!important;position:static!important;height:auto!important}
@media(max-width:991px){ul.pf-grid.gallery,ul.pf-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:576px){ul.pf-grid.gallery,ul.pf-grid{grid-template-columns:1fr!important}}

.pf-grid .items{position:relative!important;width:auto!important;float:none!important;margin:0!important;padding:0!important;left:auto!important;top:auto!important}

/* Card */
.pf-card{position:relative;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);transition:transform .4s cubic-bezier(.22,.68,0,1.2),box-shadow .4s ease,border-color .4s ease;display:flex;flex-direction:column;height:100%}
.pf-card:hover{transform:translateY(-10px);box-shadow:0 28px 70px rgba(0,0,0,.5),0 0 0 1px rgba(0,212,255,.22);border-color:rgba(0,212,255,.2)}

/* Gradient line at bottom */
.pf-card-line{height:2px;background:linear-gradient(90deg,#00d4ff,#8b00ff);transform:scaleX(0);transform-origin:left;transition:transform .45s ease .05s;flex-shrink:0}
.pf-card:hover .pf-card-line{transform:scaleX(1)}

/* Browser chrome */
.pf-browser{overflow:hidden;flex-shrink:0}
.pf-browser-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#161b22;border-bottom:1px solid rgba(255,255,255,.06)}
.pf-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.pf-red{background:#ff5f57}.pf-yellow{background:#febc2e}.pf-green{background:#28c840}
.pf-url-bar{flex:1;background:rgba(255,255,255,.055);border-radius:4px;padding:3px 10px;font-size:.58rem;color:rgba(255,255,255,.32);font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:8px}

/* Screen */
.pf-screen{position:relative;height:185px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#090917,#0f1530 50%,#090917);overflow:hidden}
.pf-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,212,255,.05) 0%,transparent 65%);pointer-events:none}

/* Logo (favicon) */
.pf-logo-img{width:84px!important;height:84px!important;object-fit:contain!important;border-radius:14px;padding:11px;background:rgba(255,255,255,.07);box-shadow:0 4px 28px rgba(0,0,0,.4);transition:transform .4s cubic-bezier(.22,.68,0,1.2),box-shadow .4s ease;position:relative;z-index:1}
.pf-card:hover .pf-logo-img{transform:scale(1.1);box-shadow:0 8px 40px rgba(0,212,255,.22)}

/* Screenshot */
.pf-ss-img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:top;transition:transform .6s ease}
.pf-card:hover .pf-ss-img{transform:scale(1.06) translateY(-2%)}

/* Placeholder */
.pf-placeholder{width:78px;height:78px;border-radius:16px;background:linear-gradient(135deg,rgba(0,212,255,.18),rgba(139,0,255,.18));border:1px solid rgba(0,212,255,.2);display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.pf-pl-letter{font-size:1.9rem;font-weight:700;color:#00d4ff;line-height:1;background:linear-gradient(135deg,#00d4ff,#8b00ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Hover overlay */
.pf-overlay{position:absolute;inset:0;background:rgba(5,5,22,.85);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:2}
.pf-card:hover .pf-overlay{opacity:1}
.pf-visit-btn{display:inline-flex;align-items:center;padding:10px 22px;background:linear-gradient(135deg,#00d4ff,#8b00ff);color:#fff!important;border-radius:8px;font-size:.76rem;font-weight:600;letter-spacing:.04em;text-decoration:none!important;transform:translateY(14px);transition:transform .35s cubic-bezier(.22,.68,0,1.2),box-shadow .35s ease;box-shadow:0 4px 20px rgba(0,212,255,.25)}
.pf-card:hover .pf-visit-btn{transform:translateY(0);box-shadow:0 8px 32px rgba(0,212,255,.4)}

/* Card body */
.pf-card-body{padding:16px 18px 14px;flex:1;position:relative;z-index:1}
.pf-badge{display:inline-block;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:100px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.18);color:#00d4ff;margin-bottom:7px;font-weight:600}
.pf-title{font-size:.9rem;font-weight:600;color:#e2e8f0;margin:0 0 3px;line-height:1.35}
.pf-domain{font-size:.65rem;color:rgba(255,255,255,.25);font-family:monospace;margin:0;letter-spacing:.02em}

/* Reveal */
.pf-reveal{opacity:0;transform:translateY(28px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.68,0,1.2)}
.pf-reveal.in{opacity:1;transform:translateY(0)}

/* CTA button */
.pf-cta-btn{display:inline-flex;align-items:center;padding:13px 30px;border:1px solid rgba(0,212,255,.28);border-radius:100px;color:#00d4ff;font-size:.82rem;font-weight:500;letter-spacing:.06em;text-decoration:none;transition:background .3s,border-color .3s,box-shadow .3s,color .3s;background:rgba(0,212,255,.04)}
.pf-cta-btn:hover{background:linear-gradient(135deg,#00d4ff,#8b00ff);border-color:transparent;box-shadow:0 8px 30px rgba(0,212,255,.3);color:#fff;text-decoration:none}

/* Remove old port-logo-card styles (replaced) */
.port-logo-card,.port-logo-inner,.port-logo-img,.port-logo-domain{all:unset}