/* ==========================================================================
   Monolythium Override Stylesheet
   Last-loaded to override template defaults with brand-correct styling
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Theme Tokens)
   -------------------------------------------------------------------------- */
:root {
    /* Background colors */
    --mono-bg-primary: #0f0f1a;
    --mono-bg-surface: #1a1a2e;
    --mono-bg-elevated: #252542;

    /* Text colors */
    --mono-text-primary: #ffffff;
    --mono-text-secondary: #b8b8d0;
    --mono-text-muted: #8888a0;

    /* Brand accent colors */
    --mono-accent-primary: #6366F1;
    --mono-accent-secondary: #8B5CF6;
    --mono-accent-gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    --mono-accent-cyan: #67e8f9;
    --mono-accent-pink: #f472b6;

    /* Link colors */
    --mono-link-color: #a5b4fc;
    --mono-link-hover: #c7d2fe;

    /* Border */
    --mono-border-color: #3f3f5c;
}

/* --------------------------------------------------------------------------
   2. Global Dark Mode Base
   -------------------------------------------------------------------------- */
body.dark {
    background-color: var(--mono-bg-primary);
    color: var(--mono-text-primary);
}

/* --------------------------------------------------------------------------
   3. Global Link Styles (Force Readable Links)
   -------------------------------------------------------------------------- */
body.dark a {
    color: var(--mono-link-color);
    transition: color 0.2s ease;
}

body.dark a:hover {
    color: var(--mono-link-hover);
}

/* --------------------------------------------------------------------------
   4. Footer Fixes - Force Readable Text on Dark Background
   -------------------------------------------------------------------------- */
.footer-style7 {
    background-color: var(--mono-bg-primary);
}

/* Footer top section */
.footer-style7 .footer-top7 {
    background: transparent;
}

.footer-style7 .footer-content7 .title {
    color: var(--mono-text-primary) !important;
}

.footer-style7 .footer-content7 .title span {
    color: var(--mono-accent-pink) !important;
}

/* Widget area */
.footer-style7 .widget-area7 {
    background: transparent;
}

/* Widget titles - FORCE white */
.footer-style7 .widget-title,
.footer-style7 .footer-widget .widget-title,
.footer-style7 .location-widget7 .widget-title,
.footer-style7 .contact-widget7 .widget-title {
    color: var(--mono-text-primary) !important;
    font-weight: 600;
}

/* Footer links in simple list - FORCE readable */
.footer-style7 .footer-links-simple,
.footer-style7 .footer-links-simple li,
.footer-style7 .footer-links-simple li a,
.footer-style7 .location-widget7 ul li a,
.footer-style7 .footer-widget ul li a {
    color: var(--mono-text-secondary) !important;
}

.footer-style7 .footer-links-simple li a:hover,
.footer-style7 .location-widget7 ul li a:hover,
.footer-style7 .footer-widget ul li a:hover {
    color: var(--mono-text-primary) !important;
}

/* Gmail/email links - FORCE readable */
.footer-style7 .gmail,
.footer-style7 .contact-widget7 .gmail,
.footer-style7 a.gmail {
    color: var(--mono-text-secondary) !important;
}

.footer-style7 .gmail:hover,
.footer-style7 .contact-widget7 .gmail:hover {
    color: var(--mono-text-primary) !important;
}

/* Footer bottom bar */
.footer-style7 .footer-botom7 {
    border-top: 1px solid var(--mono-border-color);
}

.footer-style7 .footer-botom7 p,
.footer-style7 .footer-botom7 p a {
    color: var(--mono-text-muted) !important;
}

.footer-style7 .footer-botom7 p a:hover {
    color: var(--mono-text-primary) !important;
}

/* Footer bottom links */
.footer-style7 .footer-links li a {
    color: var(--mono-text-secondary) !important;
}

.footer-style7 .footer-links li a:hover {
    color: var(--mono-text-primary) !important;
}

/* Social icons in footer */
.footer-style7 .social-icon li a {
    color: var(--mono-text-secondary) !important;
}

.footer-style7 .social-icon li a:hover {
    color: var(--mono-accent-primary) !important;
}

/* --------------------------------------------------------------------------
   5. Hero Section Fixes - Proper Centering
   -------------------------------------------------------------------------- */
.hero-style16 {
    position: relative;
    background: var(--mono-bg-primary);
}

/* Remove any background placeholders */
.hero-style16::before,
.hero-style16::after {
    background-image: none !important;
}

/* Hide hero image container */
.hero-style16 .hero-img16 {
    display: none !important;
}

/* Center hero content properly - vertically centered in viewport */
.hero-style16 .hero-content16 {
    padding: 180px 0 120px;
    text-align: center;
    min-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-style16 .hero-content16 .title {
    margin-bottom: 24px;
}

.hero-style16 .hero-content16 p {
    color: var(--mono-text-secondary);
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.7;
}

/* Hero buttons - center alignment */
.hero-style16 .hero-btn16 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

/* --------------------------------------------------------------------------
   6. Core Tooling Section - Improved Contrast and Visibility
   -------------------------------------------------------------------------- */
.service-sec26 {
    position: relative;
}

.ser-info26 {
    background-image: none !important;
    background: linear-gradient(135deg,
        rgba(26, 26, 46, 0.95) 0%,
        rgba(22, 33, 62, 0.95) 50%,
        rgba(15, 52, 96, 0.95) 100%) !important;
    border-radius: 20px;
    padding: 40px 30px;
    border: 1px solid var(--mono-border-color);
}

.ser-info26 .title {
    color: var(--mono-text-primary) !important;
    font-weight: 600;
    margin-bottom: 16px;
}

.ser-info26 h5 {
    color: var(--mono-text-primary) !important;
    font-weight: 500;
    margin-bottom: 8px;
}

.ser-info26 p,
.ser-info26 p.small,
.ser-info26 .small {
    color: var(--mono-text-secondary) !important;
    margin-bottom: 12px;
}

.ser-info26 a,
.ser-info26 a.small {
    color: var(--mono-accent-cyan) !important;
}

.ser-info26 a:hover {
    color: var(--mono-text-primary) !important;
}

/* --------------------------------------------------------------------------
   7. Join the Network Section - Fix Card Layout
   -------------------------------------------------------------------------- */
.pricing-style4 {
    position: relative;
}

/* Remove background image layer */
.pricing-style4::before {
    display: none !important;
}

/* Make cards display in proper grid on desktop */
.pricing-style4 .col-lg-8 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* Reset card margin for grid layout */
.pricing-style4 .price-card4 {
    margin-top: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pricing-style4 .price-card4.v2 {
    margin-top: 0 !important;
}

/* Card styling improvements */
.price-card4 {
    background-color: var(--mono-bg-elevated);
    border: 1px solid var(--mono-border-color);
    border-radius: 20px;
    padding: 40px 30px !important;
}

.price-card4 .price-heade4 {
    padding-right: 0;
    margin-bottom: 20px;
}

.price-card4 .price-heade4 .title {
    color: var(--mono-text-primary) !important;
    font-size: 24px;
    margin-bottom: 8px;
}

.price-card4 .price-heade4 span {
    color: var(--mono-text-secondary) !important;
}

.price-card4 .price-item4 {
    padding-left: 0 !important;
    flex-grow: 1;
}

.price-card4 .price-item4 li {
    color: var(--mono-text-secondary) !important;
    padding-left: 20px;
    position: relative;
    margin-bottom: 8px;
}

.price-card4 .price-item4 li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--mono-accent-primary);
}

.price-card4 .price-item-price4 {
    margin-top: auto;
    padding-top: 20px;
}

/* Gradient card (v2) - keep gradient but ensure text readable */
.price-card4.v2 {
    background-image: linear-gradient(135deg, #67e8f9 0%, #f472b6 100%) !important;
    border: none;
}

.price-card4.v2 .price-heade4 .title,
.price-card4.v2 .price-heade4 span,
.price-card4.v2 .price-item4 li {
    color: #1a1a2e !important;
}

.price-card4.v2 .price-item4 li::before {
    background-color: #1a1a2e;
}

/* Responsive: Stack cards on mobile */
@media (max-width: 991px) {
    .pricing-style4 .col-lg-8 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .pricing-style4 .col-lg-8 {
        margin-top: 30px;
    }

    .price-card4 {
        padding: 30px 24px !important;
    }
}

/* --------------------------------------------------------------------------
   8. Pricing List in Left Column
   -------------------------------------------------------------------------- */
.pricing-list4 li {
    color: var(--mono-text-primary) !important;
}

.pricing-list4 li i {
    color: var(--mono-accent-cyan) !important;
}

/* --------------------------------------------------------------------------
   9. Section Titles and Subtitles
   -------------------------------------------------------------------------- */
.sec-title.white .sub-title {
    color: var(--mono-text-muted) !important;
}

.sec-title.white .title {
    color: var(--mono-text-primary) !important;
}

.sec-title.white p {
    color: var(--mono-text-secondary) !important;
}

/* --------------------------------------------------------------------------
   10. Feature Blocks (Protocol Highlights)
   -------------------------------------------------------------------------- */
.feature-block13 {
    background-color: transparent;
}

.feature-block13 .title {
    color: var(--mono-text-primary) !important;
}

.feature-block13 p {
    color: var(--mono-text-secondary) !important;
}

/* --------------------------------------------------------------------------
   11. About Section
   -------------------------------------------------------------------------- */
.about-info10 p {
    color: var(--mono-text-secondary) !important;
}

/* --------------------------------------------------------------------------
   12. Blog/Updates Section
   -------------------------------------------------------------------------- */
.blog-sec5 p {
    color: var(--mono-text-secondary) !important;
}

.blog-sec5 a {
    color: var(--mono-accent-cyan) !important;
}

.blog-sec5 a:hover {
    color: var(--mono-text-primary) !important;
}

/* --------------------------------------------------------------------------
   13. Testimonial/Community Section
   -------------------------------------------------------------------------- */
.testimonial-sec4 p {
    color: var(--mono-text-secondary) !important;
}

/* --------------------------------------------------------------------------
   14. Button Styles - Ensure Visibility
   -------------------------------------------------------------------------- */
.ibt-btn-outline-2 {
    border-color: var(--mono-border-color) !important;
    color: var(--mono-text-primary) !important;
}

.ibt-btn-outline-2:hover {
    border-color: var(--mono-accent-primary) !important;
    background-color: var(--mono-accent-primary) !important;
}

.ibt-btn-dark {
    background-color: var(--mono-bg-elevated) !important;
    color: var(--mono-text-primary) !important;
}

.ibt-btn-dark:hover {
    background-color: var(--mono-accent-primary) !important;
}

/* --------------------------------------------------------------------------
   15. Marquee Section
   -------------------------------------------------------------------------- */
.marquee-sec .marquee span {
    color: var(--mono-text-muted) !important;
}

/* --------------------------------------------------------------------------
   16. Preloader
   -------------------------------------------------------------------------- */
#preloader .loader img {
    max-width: 64px;
    height: auto;
}

/* --------------------------------------------------------------------------
   17. Hide Sidebar Toggle Completely
   -------------------------------------------------------------------------- */
.side-menu,
.side-menu2:not([data-menu="mobileMenu"]) {
    display: none !important;
}

/* --------------------------------------------------------------------------
   18. Scroll Button
   -------------------------------------------------------------------------- */
#scrollBtn {
    background-color: var(--mono-accent-primary) !important;
    color: var(--mono-text-primary) !important;
}

#scrollBtn:hover {
    background-color: var(--mono-accent-secondary) !important;
}

/* --------------------------------------------------------------------------
   19. Contact Button Circle (Footer CTA)
   -------------------------------------------------------------------------- */
.contact-btn {
    color: var(--mono-text-primary) !important;
}

.contact-btn .border-outer,
.contact-btn .border-inner {
    border-color: var(--mono-text-primary) !important;
}

.contact-btn:hover {
    color: var(--mono-accent-primary) !important;
}

.contact-btn:hover .border-outer,
.contact-btn:hover .border-inner {
    border-color: var(--mono-accent-primary) !important;
}

/* --------------------------------------------------------------------------
   20. Sticky Navigation
   -------------------------------------------------------------------------- */
.vs-header2 {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(15, 15, 26, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.vs-header2.scrolled {
    background-color: rgba(15, 15, 26, 0.95);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* Ensure header content has proper padding */
.vs-header2 .header-menu-area {
    padding: 16px 0;
}

/* --------------------------------------------------------------------------
   21. Inner Page Top Spacing (non-home pages)
   -------------------------------------------------------------------------- */
/* Add top padding to first section after header on inner pages */
.wrapper > section:first-of-type:not(.hero-style16) {
    padding-top: 160px !important;
}

/* Ensure consistent spacing on all inner page first sections */
.about-us-sec10:first-of-type,
.feature-sec13:first-of-type,
.contact-sec:first-of-type,
.blog-sec5:first-of-type {
    padding-top: 160px;
}

@media (max-width: 991px) {
    .wrapper > section:first-of-type:not(.hero-style16) {
        padding-top: 120px !important;
    }
}

@media (max-width: 767px) {
    .wrapper > section:first-of-type:not(.hero-style16) {
        padding-top: 100px !important;
    }
}