/**
 * SoftiSense — Abyss Pulse Brand Override
 * custom.css — Load AFTER style.css
 * Built from inspection of index.html, our-services.html, about-us.html
 *
 * Brand Colors:
 * Deep Abyss Blue    #070F1F  — Primary background (60%)
 * Electric Core Blue #1F6BFF  — Primary action / CTAs (25%)
 * Ice Sky            #EAF3FF  — Light text & soft sections (10%)
 * Cyber Violet       #6D4CFF  — Signature accent (5%)
 * Card Surface       #111A2E  — Cards, panels, containers
 * Border             #1C2742  — Dividers, outlines
 * Hover              #1654D4  — Button hover shade
 */

/* ============================================
   0. CSS TOKENS
   ============================================ */
:root {
    --brand-primary:        #1F6BFF;
    --brand-primary-hover:  #1654D4;
    --brand-accent:         #6D4CFF;
    --brand-dark:           #070F1F;
    --brand-surface:        #111A2E;
    --brand-border:         #1C2742;
    --brand-light:          #EAF3FF;
    --brand-text:           rgba(234, 243, 255, 0.75);
    --brand-text-muted:     rgba(234, 243, 255, 0.50);

    /* Aliases matched to template's var() references */
    --primary:              #1F6BFF;
    --rgba-primary-1:       rgba(31, 107, 255, 0.10);
    --rgba-primary-2:       rgba(31, 107, 255, 0.20);

    --gradient-primary:     linear-gradient(135deg, #1F6BFF 0%, #6D4CFF 100%);
}


/* ============================================
   1. GLOBAL BODY & BASE TEXT
   ============================================ */
body {
    background-color: var(--brand-dark);
    color: var(--brand-text);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--brand-light);
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: var(--brand-light);
}
h1 a:hover, h2 a:hover, h3 a:hover,
h4 a:hover, h5 a:hover, h6 a:hover {
    color: var(--brand-primary);
}
a       { color: var(--brand-text); }
a:hover,
a:active { color: var(--brand-primary); }
p a     { color: var(--brand-light); }

::selection      { background: var(--brand-primary); color: #fff; }
::-moz-selection { background: var(--brand-primary); color: #fff; }


/* ============================================
   2. SECTION BACKGROUND OVERRIDES
      HTML uses bg-white on page-content and
      several section-full divs — override all.
   ============================================ */

/* Every page wraps content in: <div class="page-content bg-white"> */
.page-content,
.page-content.bg-white {
    background-color: var(--brand-dark) !important;
}

/* Light content sections (about page icons, services list) */
/* Using surface color so they read as cards against the main dark bg */
.section-full.bg-white,
.section-full.bg-white.content-inner {
    background-color: var(--brand-surface) !important;
}

/* Contact form section on index.html has bg-white + background-image */
/* Keep the bg-image visible, just reset the white base */
.contact-form-bx,
.contact-form-bx.bg-white {
    background-color: var(--brand-surface) !important;
    border-top: 1px solid var(--brand-border);
    border-bottom: 1px solid var(--brand-border);
}


/* ============================================
   3. SECTION HEADS — hardcoded dark colors
      .section-head p      { color: #0f192d }
      .title-small         { color: #494949 }
      .text-black section  → on dark bg, needs light text
   ============================================ */
.section-head p {
    color: var(--brand-text) !important;
}
.title-small {
    color: var(--brand-text-muted) !important;
}

/* Services page: <div class="section-head text-black text-center"> */
/* This section has no bg-white so it inherits the dark body */
.section-head.text-black h1,
.section-head.text-black h2,
.section-head.text-black h3,
.section-head.text-black h4,
.section-head h4.text-gray-dark {
    color: var(--brand-light) !important;
}

/* About page icon wrappers use text-black on dark surface sections */
/* Override icon cells to brand primary so they pop on dark cards */
.icon-bx-wraper .icon-cell.text-black,
.icon-md.text-black .icon-cell,
.icon-md.text-black a,
.icon-bx-wraper .icon-md.text-black {
    color: var(--brand-primary) !important;
}


/* ============================================
   4. DECORATIVE HEADING UNDERLINE
      Used as: <span class="bg-primary"></span>
      inside .box-title headings across all pages
   ============================================ */
.box-title span.bg-primary,
h2.box-title span,
h3.box-title span {
    display: block;
    width: 60px;
    height: 3px;
    margin: 12px auto 0;
    background: var(--gradient-primary) !important;
    border-radius: 2px;
}


/* ============================================
   5. MAIN BAR, TOP BAR & STICKY HEADER
   ============================================ */
.main-bar {
    background: var(--brand-dark);
    border-bottom: 1px solid var(--brand-border);
}
.top-bar,
.top-bar.bg-dark {
    background-color: var(--brand-dark) !important;
    border-bottom: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
}
.dlab-topbar-left ul li a,
.dlab-topbar-right ul li a {
    color: var(--brand-text-muted);
}
.dlab-topbar-left ul li a:hover,
.dlab-topbar-right ul li a:hover {
    color: var(--brand-primary);
}
.is-fixed .main-bar {
    background: rgba(7, 15, 31, 0.97) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}


/* ============================================
   6. NAVIGATION — TOP LEVEL
      HTML: <ul class="nav navbar-nav">
   ============================================ */
.header-nav .nav > li > a,
.navbar-nav > li > a {
    color: var(--brand-light);
}
.header-nav .nav > li > a:hover,
.header-nav .nav > li:hover > a,
.header-nav .nav > li.active > a,
.header-nav .nav > li.current-menu-item > a,
.navbar-nav > li > a:hover,
.navbar-nav > li.active > a {
    color: var(--brand-primary) !important;
    background-color: transparent;
}
.navbar-toggler span {
    background: var(--brand-light);
}

/* "Start Your Project" CTA in extra-nav */
.extra-nav .site-button.primary {
    background: var(--gradient-primary);
    color: #fff;
    border: none;
}
.extra-nav .site-button.primary:hover {
    background: var(--brand-primary-hover);
    box-shadow: 0 4px 16px rgba(31, 107, 255, 0.4);
    transform: translateY(-1px);
}


/* ============================================
   7. NAVIGATION — DROPDOWN & MEGA MENU
   ============================================ */
.header-nav .nav > li .sub-menu,
.header-nav .nav > li .mega-menu {
    background-color: var(--brand-surface);
    border-color: var(--brand-border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.header-nav .nav > li .sub-menu li a {
    color: var(--brand-text);
    border-bottom: 1px solid var(--brand-border);
}
.header-nav .nav > li .sub-menu li a:hover,
.header-nav .nav > li .sub-menu li:hover > a {
    background-color: var(--rgba-primary-1);
    color: var(--brand-primary);
}
.header-nav .nav > li .mega-menu > li > ul > li > a {
    color: var(--brand-text);
}
.header-nav .nav > li .mega-menu > li > ul > li > a:hover {
    color: var(--brand-primary);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--brand-primary);
    color: #fff;
}

/* Mobile nav panel */
@media only screen and (max-width: 991px) {
    .header-nav .nav {
        background-color: var(--brand-surface);
        border-top: 1px solid var(--brand-border);
    }
    .header-nav .nav > li > a {
        color: var(--brand-light);
        border-bottom: 1px solid var(--brand-border);
    }
    .header-nav .nav > li > a:hover,
    .header-nav .nav > li.active > a,
    .navbar-nav > li.active > a {
        color: var(--brand-primary) !important;
    }
}


/* ============================================
   8. INNER PAGE BANNER
      HTML: <div class="dlab-bnr-inr overlay-primary">
   ============================================ */
.dlab-bnr-inr.overlay-primary::before,
.section-full.overlay-primary::before {
    background: var(--gradient-primary) !important;
    opacity: 0.88;
}
.overlay-primary-dark::before {
    background: rgba(7, 15, 31, 0.92) !important;
}

/* Breadcrumb on inner banners */
.dlab-bnr-inr .breadcrumb-row ul li a {
    color: rgba(234, 243, 255, 0.85);
}
.dlab-bnr-inr .breadcrumb-row ul li a:hover {
    color: #fff;
}
.dlab-bnr-inr .breadcrumb-row ul li {
    color: rgba(234, 243, 255, 0.6);
}
.breadcrumb-row ul li a {
    color: var(--brand-text-muted);
}
.breadcrumb-row ul li a:hover {
    color: var(--brand-primary);
}


/* ============================================
   9. BUTTONS — .site-button (primary CTA)
   ============================================ */
.site-button,
button.site-button,
input[type="submit"].site-button {
    background: var(--brand-primary);
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}
.site-button:hover,
button.site-button:hover,
input[type="submit"].site-button:hover {
    background: var(--brand-primary-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(31, 107, 255, 0.35);
}
.site-button.outline,
.site-button.outline-2 {
    background: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
}
.site-button.outline:hover,
.site-button.outline-2:hover {
    background: var(--brand-primary);
    background: var(--gradient-primary);
    color: #fff;
    border-color: transparent;
}
.site-button-secondry {
    background: var(--brand-surface);
    color: var(--brand-light);
    border: 1px solid var(--brand-border);
}
.site-button-secondry:hover {
    background: var(--brand-border);
    color: var(--brand-light);
}
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}
.btn-outline-primary {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}
.btn-outline-primary:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}


/* ============================================
   10. FORMS & INPUTS
       HTML uses: .form-control, .input-group,
       .input-group-addon, label
   ============================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
textarea,
select {
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    color: var(--brand-light);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--brand-text-muted);
}
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
.input-group:focus-within {
    background-color: var(--brand-surface);
    border-color: var(--brand-primary);
    color: var(--brand-light);
    box-shadow: 0 0 0 3px rgba(31, 107, 255, 0.15);
    outline: none;
}
label {
    color: var(--brand-text);
}

/* .input-group-addon — icon wrapper beside inputs
   HTML: <span class="input-group-addon"><i class="ti-user text-primary"></i></span>
   Template default: background #fff, border #e1e1e1 */
.input-group-addon {
    background: var(--brand-border) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-primary) !important;
}
.input-group-addon i {
    color: var(--brand-primary) !important;
}

/* Bootstrap select dark */
.bootstrap-select .dropdown-toggle {
    background-color: var(--brand-surface) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text) !important;
}

/* Checkbox & radio — hardcoded #3396d1 in style.css */
input[type=checkbox] + label:hover:before,
input[type=radio] + label:hover:before {
    border-color: var(--brand-primary);
}
input[type=radio]:checked + label:before {
    border-color: var(--brand-primary);
}
input[type=checkbox]:checked + label:before {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}


/* ============================================
   11. INQUIRY / CONTACT FORM CARD
       HTML: <form class="inquiry-form dzForm">
       Lives inside .overlay-primary-dark section,
       needs surface card to stand out from overlay.
   ============================================ */
.inquiry-form,
.dezPlaceAni {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}
.inquiry-form h3,
.inquiry-form p,
.dezPlaceAni h3,
.dezPlaceAni p {
    color: var(--brand-light);
}

@media only screen and (max-width: 767px) {
    .inquiry-form,
    .dezPlaceAni {
        padding: 24px;
    }
}


/* ============================================
   12. CHECKED LIST — .list-checked.primary
       HTML: <ul class="list-checked primary">
       Template default icon color: #777
   ============================================ */
.list-checked.primary li:before {
    color: var(--brand-primary) !important;
}
.list-checked li {
    color: var(--brand-text);
}


/* ============================================
   13. IMAGE OVERLAYS
       HTML: <div class="dlab-media dlab-img-overlay6 gradient">
       Used on about page for image cards
   ============================================ */
.dlab-media.dlab-img-overlay6.gradient::before,
.dlab-img-overlay6.gradient::before {
    background: var(--gradient-primary) !important;
    opacity: 0;
}
.dlab-media.dlab-img-overlay6.gradient:hover::before,
.dlab-box:hover .dlab-img-overlay6.gradient::before {
    opacity: 0.75;
    width: 100%;
    height: 100%;
}


/* ============================================
   14. ICON BOXES — services & about cards
       HTML: .icon-bx-wraper.expertise.bx-style-1
             .icon-bx-wraper.bx-style-1
   ============================================ */
.icon-bx-wraper.bx-style-1 {
    border-color: var(--brand-border);
    background-color: var(--brand-surface);
    transition: all 0.3s ease;
}
.icon-bx-wraper.bx-style-1 .icon-cell,
.icon-bx-wraper .icon-cell {
    color: var(--brand-primary);
}
.icon-bx-wraper.bx-style-1:hover {
    background: var(--gradient-primary) !important;
    border-color: transparent;
    box-shadow: 0 10px 40px rgba(31, 107, 255, 0.25);
}
.icon-bx-wraper.bx-style-1:hover .icon-cell,
.icon-bx-wraper.bx-style-1:hover .dlab-tilte,
.icon-bx-wraper.bx-style-1:hover p,
.icon-bx-wraper.bx-style-1:hover a {
    color: #fff !important;
}
.icon-bx-wraper.expertise:hover {
    transform: translateY(-6px);
}
/* About page plain icon wrappers (no bx-style) */
.icon-bx-wraper .icon-md.text-black,
.icon-bx-wraper .icon-cell.text-black {
    color: var(--brand-primary) !important;
}


/* ============================================
   15. SECTION & COUNTER SPECIFIC CLASSES
   ============================================ */

/* Section head utility classes hardcoded */
.section-head h2,
.section-head h3 {
    color: var(--brand-light);
}
.section-head p {
    color: var(--brand-text) !important;
}
.section-head h2 span,
.section-head h4 span,
.dlab-title span {
    color: var(--brand-primary);
}

/* Counter row: .choses-info-content */
.choses-info-content .counter,
.choses-info-content h2 {
    color: var(--brand-primary);
}

/* Hardcoded #3396d1 instances in style.css */
.rating-container .rating-stars          { color: var(--brand-primary); }
.pagination .page-numbers.current,
.pagination a.page-numbers:hover         { background: var(--brand-primary); color: #fff; }
.nav-links .nav-previous a,
.nav-links .nav-next a                   { color: var(--brand-primary); }
.nav-links .nav-previous a:hover,
.nav-links .nav-next a:hover             { color: var(--brand-accent); }
.recent-posts-entry .post-date,
.tweets-feed-entry .tweet-date           { color: var(--brand-primary); }
.widget_rss ul .rss-date                 { color: var(--brand-primary); }


/* ============================================
   16. BG & TEXT COLOR UTILITIES
   ============================================ */
.bg-primary {
    background: var(--gradient-primary) !important;
}
.bg-dark {
    background: var(--brand-dark) !important;
}
.text-primary {
    color: var(--brand-primary) !important;
}
.widget_getintuch ul li i,
.icon-bx-wraper .icon-cell {
    color: var(--brand-primary);
}


/* ============================================
   17. FOOTER
       HTML: .footer-top.bg-primary + .footer-bottom.bg-primary
   ============================================ */
.site-footer .footer-top,
.site-footer .footer-bottom,
.footer-top.bg-primary,
.footer-bottom.bg-primary {
    background: var(--brand-dark) !important;
    background-color: var(--brand-dark) !important;
    border-top: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
}
.site-footer a,
.site-footer .footer-top a {
    color: var(--brand-text-muted);
}
.site-footer a:hover,
.site-footer .footer-top a:hover,
.site-footer .footer-bottom a:hover,
.copyright a:hover {
    color: var(--brand-primary) !important;
}
/* Footer headings */
.site-footer h5.text-white {
    color: var(--brand-light) !important;
    border-bottom: 1px solid var(--brand-border);
    padding-bottom: 12px;
    margin-bottom: 20px;
}
/* Footer widget links */
.widget_services ul li {
    border-bottom: 1px solid var(--brand-border);
}
.widget_services ul li a {
    color: var(--brand-text-muted);
}
.widget_services ul li a:hover {
    color: var(--brand-primary);
}
/* Footer contact info */
.widget_getintuch ul li {
    color: var(--brand-text-muted);
    border-bottom: 1px solid var(--brand-border);
}
.widget_getintuch ul li strong {
    color: var(--brand-light);
}
.widget_getintuch ul li i {
    color: var(--brand-primary);
}
/* Social icon buttons */
.dlab-social-icon li a:hover              { background: var(--brand-primary); }
.site-footer .site-button.facebook:hover  { background: #1877f2 !important; }
.site-footer .site-button.linkedin:hover  { background: #0077b5 !important; }
.site-footer .site-button.twitter:hover   { background: #1da1f2 !important; }
.site-footer .site-button.instagram:hover {
    background: radial-gradient(circle at 30% 110%, #ffdb8b, #f56040, #bc2a8d, #8a3ab9) !important;
}
/* Social buttons base state */
.site-footer .site-button.circle {
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
    transition: all 0.3s ease;
}


/* ============================================
   18. PAGINATION
   ============================================ */
.pagination > li > a,
.pagination > li > span {
    background-color: var(--brand-surface);
    border-color: var(--brand-border);
    color: var(--brand-text);
}
.pagination > li > a:hover,
.pagination > li > span:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    background-color: var(--rgba-primary-1);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:focus {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff;
}


/* ============================================
   19. WIDGETS & SIDEBAR
   ============================================ */
.widget-title {
    color: var(--brand-light);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 10px;
}
.widget ul li {
    border-bottom: 1px solid var(--brand-border);
}
.widget ul li a { color: var(--brand-text); }
.widget ul li a:hover { color: var(--brand-primary); }
.widget .post-title { color: var(--brand-light); }


/* ============================================
   20. TESTIMONIALS / TEAM FLIP CARDS
       HTML: .testimonial-flip .front .inner
   ============================================ */
.testimonial-flip .front .inner,
.testimonial-flip .back .inner {
    background: var(--gradient-primary) !important;
}
.testimonial-flip .testimonial-detail .testimonial-name {
    color: #fff;
}


/* ============================================
   21. SCROLL TO TOP & LOADER
   ============================================ */
.scroltop {
    background: var(--brand-primary);
    border: none;
    box-shadow: 0 4px 16px rgba(31, 107, 255, 0.35);
    transition: all 0.3s ease;
}
.scroltop:hover {
    background: var(--brand-accent);
    transform: translateY(-2px);
}
.loading-page-1 .spinner svg circle {
    stroke: var(--brand-primary);
}


/* ============================================
   22. UTILITY CLASSES
   ============================================ */

/* Gradient text — use on hero headlines */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Brand shadow */
.brand-shadow {
    box-shadow: 0 5px 20px rgba(31, 107, 255, 0.2);
}

/* Hover lift */
.hover-lift:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

/* Cyber Violet feature badge — for pricing/feature tags */
.feature-tag {
    background-color: rgba(109, 76, 255, 0.12);
    color: var(--brand-accent);
    border: 1px solid rgba(109, 76, 255, 0.25);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
}