/* =====================================================

   BuyLeadData.com - Header Styles

   File: /css/header.css

   ===================================================== */


/* ===================================================== 

   CRITICAL: Force Full Width & Reset Styles 

   ===================================================== */

html, body {

    margin: 0 !important;

    padding: 0 !important;

    overflow-x: hidden !important;

    width: 100% !important;

    max-width: 100% !important;

}


/* Remove any container margins from parent theme */

body > * {

    margin-left: 0 !important;

    margin-right: 0 !important;

}


/* Kill any max-width containers that might exist */

.container, .wrapper, .content, .main, [class*="container"], [class*="wrapper"] {

    max-width: none !important;

}


/* Global Reset */

*, *::before, *::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    padding-top: 0;

    position: relative;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

}


/* Prevent body scroll when menu is open */

body.menu-open {

    overflow: hidden;

    position: fixed;

    width: 100%;

}


/* ===================================================== 

   Reading Progress Bar 

   ===================================================== */

.reading-progress-bar {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    width: 100vw;

    height: 3px;

    background: rgba(10, 14, 39, 0.1);

    z-index: 10002;

    pointer-events: none;

}


.reading-progress-bar::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: var(--scroll-progress, 0%);

    background: linear-gradient(90deg, #0A84FF 0%, #00D4FF 50%, #0A84FF 100%);

    background-size: 200% 100%;

    animation: shimmer 2s linear infinite;

    transition: width 0.2s ease-out;

    box-shadow: 0 0 10px rgba(10, 132, 255, 0.5);

}


@keyframes shimmer {

    0% { background-position: -200% 0; }

    100% { background-position: 200% 0; }

}


/* ===================================================== 

   Main Header 

   ===================================================== */

.header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    width: 100vw;

    margin: 0;

    padding: 0;

    background: rgba(255, 255, 255, 0.98);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    box-shadow: 0 2px 20px rgba(0,0,0,0.08);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: 10000;

}


.header.scrolled {

    background: rgba(255, 255, 255, 0.98);

    box-shadow: 0 4px 30px rgba(0,0,0,0.12);

}


/* Add proper spacing for body content */

body.has-header {

    padding-top: 120px;

}


/* ===================================================== 

   Navigation Bar 

   ===================================================== */

.navbar {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 0.75rem 2rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: relative;

    min-height: 80px;

}


/* ===================================================== 

   Logo & Branding 

   ===================================================== */

.logo {

    position: relative;

    display: inline-flex;

    align-items: center;

    text-decoration: none;

    z-index: 10;

    transition: transform 0.3s ease;

}


.logo:focus-visible {

    outline: 2px solid #0A84FF;

    outline-offset: 4px;

    border-radius: 8px;

}


.logo-container {

    position: relative;

    display: inline-block;

}


.logo-img {

    height: 80px;

    width: auto;

    max-width: 280px;

    object-fit: contain;

    position: relative;

    z-index: 2;

    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));

    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

}


.logo:hover .logo-img {

    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));

    transform: scale(1.05) rotate(-1deg);

}


/* ===================================================== 

   Animated Particles 

   ===================================================== */

.particles-wrapper {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 150%;

    height: 150%;

    pointer-events: none;

    z-index: 1;

}


.particle {

    position: absolute;

    width: 4px;

    height: 4px;

    background: linear-gradient(135deg, #0A84FF, #00D4FF);

    border-radius: 50%;

    opacity: 0;

    animation: float-particle 8s infinite;

    box-shadow: 0 0 6px rgba(10, 132, 255, 0.6);

    will-change: transform, opacity;

}


.particle:nth-child(1) {

    top: 10%;

    left: 20%;

    animation-delay: 0s;

    animation-duration: 7s;

}


.particle:nth-child(2) {

    top: 70%;

    left: 80%;

    animation-delay: 1s;

    animation-duration: 9s;

    width: 3px;

    height: 3px;

}


.particle:nth-child(3) {

    top: 30%;

    left: 70%;

    animation-delay: 2s;

    animation-duration: 8s;

}


.particle:nth-child(4) {

    top: 80%;

    left: 30%;

    animation-delay: 3s;

    animation-duration: 10s;

    width: 5px;

    height: 5px;

}


.particle:nth-child(5) {

    top: 20%;

    left: 50%;

    animation-delay: 4s;

    animation-duration: 7.5s;

}


.particle:nth-child(6) {

    top: 60%;

    left: 10%;

    animation-delay: 5s;

    animation-duration: 8.5s;

    width: 3px;

    height: 3px;

}


@keyframes float-particle {

    0% {

        opacity: 0;

        transform: translateY(20px) scale(0);

    }

    10% {

        opacity: 0.8;

        transform: translateY(0) scale(1);

    }

    50% {

        opacity: 0.6;

        transform: translateY(-10px) translateX(10px) scale(1.2);

    }

    90% {

        opacity: 0.8;

        transform: translateY(5px) translateX(-5px) scale(1);

    }

    100% {

        opacity: 0;

        transform: translateY(-20px) scale(0);

    }

}


/* Logo Shine Animation */

.logo-shine {

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: linear-gradient(

        45deg,

        transparent 30%,

        rgba(255, 255, 255, 0.5) 50%,

        transparent 70%

    );

    transform: rotate(45deg) translateX(-200%);

    transition: transform 0.6s ease;

    z-index: 3;

    pointer-events: none;

}


.logo:hover .logo-shine {

    transform: rotate(45deg) translateX(200%);

}


/* ===================================================== 

   Desktop Navigation Menu 

   ===================================================== */

.nav-menu {

    display: flex;

    list-style: none;

    margin: 0;

    padding: 0;

    align-items: center;

    gap: 1.5rem;

}


.nav-link {

    color: #0A0E27;

    text-decoration: none;

    font-weight: 500;

    font-size: 0.95rem;

    position: relative;

    padding: 0.5rem 0;

    transition: color 0.3s ease;

}


.nav-link:focus-visible {

    outline: 2px solid #0A84FF;

    outline-offset: 2px;

    border-radius: 4px;

}


.nav-link::before {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    width: 0;

    height: 2px;

    background: linear-gradient(90deg, #0A84FF, #00D4FF);

    transform: translateX(-50%);

    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}


.nav-link:hover {

    color: #0A84FF;

}


.nav-link:hover::before {

    width: 100%;

}


/* ===================================================== 

   CTA Button 

   ===================================================== */

.cta-button {

    background: linear-gradient(135deg, #0A84FF 0%, #00D4FF 100%);

    color: white !important;

    padding: 0.75rem 1.75rem;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 600;

    font-size: 0.95rem;

    box-shadow: 0 5px 20px rgba(10, 132, 255, 0.3);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

    z-index: 1;

    border: none;

    cursor: pointer;

}


.cta-button:focus-visible {

    outline: 2px solid #ffffff;

    outline-offset: 2px;

}


.cta-button::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.3);

    transform: translate(-50%, -50%);

    transition: width 0.6s, height 0.6s;

    z-index: -1;

}


.cta-button:hover::before {

    width: 300px;

    height: 300px;

}


.cta-button:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 30px rgba(10, 132, 255, 0.4);

}


/* ===================================================== 

   Hamburger Menu Button 

   ===================================================== */

.hamburger-menu {

    display: none;

    width: 44px;

    height: 44px;

    padding: 8px;

    background: transparent;

    border: none;

    cursor: pointer;

    transition: opacity 0.3s;

    z-index: 10002;

    border-radius: 8px;

}


.hamburger-menu:focus-visible {

    outline: 2px solid #0A84FF;

    outline-offset: 2px;

}


.hamburger-box {

    width: 28px;

    height: 20px;

    display: inline-block;

    position: relative;

}


.hamburger-inner {

    display: block;

    top: 50%;

    margin-top: -1.5px;

    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

}


.hamburger-inner,

.hamburger-inner::before,

.hamburger-inner::after {

    width: 28px;

    height: 3px;

    background: #0A0E27;

    border-radius: 2px;

    position: absolute;

    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

}


.hamburger-inner::before {

    content: '';

    top: -8px;

    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;

}


.hamburger-inner::after {

    content: '';

    bottom: -8px;

    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);

}


/* Hamburger Animation */

.hamburger-menu.active .hamburger-inner {

    transform: rotate(225deg);

    transition-delay: 0.12s;

    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

    background: #0A84FF;

}


.hamburger-menu.active .hamburger-inner::before {

    top: 0;

    opacity: 0;

    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;

}


.hamburger-menu.active .hamburger-inner::after {

    bottom: 0;

    transform: rotate(-90deg);

    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);

    background: #0A84FF;

}


/* ===================================================== 

   Mobile Menu 

   ===================================================== */

.mobile-menu {

    position: fixed;

    top: 0;

    right: -100%;

    width: 85%;

    max-width: 400px;

    height: 100vh;

    background: white;

    box-shadow: -5px 0 30px rgba(0,0,0,0.1);

    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: 9999;

    overflow-y: auto;

    padding-top: 120px;

}


.mobile-menu.active {

    right: 0;

}


.mobile-menu-inner {

    padding: 2rem 0;

}


.mobile-nav-menu {

    list-style: none;

    padding: 0;

    margin: 0;

}


.mobile-nav-item {

    margin: 0;

    border-bottom: 1px solid #f0f0f0;

    opacity: 0;

    transform: translateX(50px);

    transition: opacity 0.3s ease, transform 0.3s ease;

}


.mobile-menu.active .mobile-nav-item {

    opacity: 1;

    transform: translateX(0);

}


.mobile-nav-item:nth-child(1) { transition-delay: 0.1s; }

.mobile-nav-item:nth-child(2) { transition-delay: 0.15s; }

.mobile-nav-item:nth-child(3) { transition-delay: 0.2s; }

.mobile-nav-item:nth-child(4) { transition-delay: 0.25s; }

.mobile-nav-item:nth-child(5) { transition-delay: 0.3s; }

.mobile-nav-item:nth-child(6) { transition-delay: 0.35s; }

.mobile-nav-item:nth-child(7) { transition-delay: 0.4s; }

.mobile-nav-item:nth-child(8) { transition-delay: 0.45s; }

.mobile-nav-item:nth-child(9) { transition-delay: 0.5s; }


.mobile-nav-link {

    display: flex;

    align-items: center;

    padding: 1.25rem 2rem;

    color: #0A0E27;

    text-decoration: none;

    font-size: 1rem;

    font-weight: 500;

    transition: all 0.3s ease;

}


.mobile-nav-link:focus-visible {

    outline: 2px solid #0A84FF;

    outline-offset: -2px;

    background: rgba(10, 132, 255, 0.1);

}


.mobile-nav-link:hover {

    background: linear-gradient(90deg, #F0F9FF 0%, #E6F4FF 100%);

    color: #0A84FF;

    padding-left: 2.5rem;

}


.mobile-nav-icon {

    font-size: 1.25rem;

    margin-right: 1rem;

    min-width: 30px;

    text-align: center;

}


.mobile-cta {

    border: none;

    padding: 1.5rem 2rem;

}


.mobile-cta-button {

    display: block;

    background: linear-gradient(135deg, #0A84FF 0%, #00D4FF 100%);

    color: white !important;

    padding: 1rem 2rem;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 600;

    text-align: center;

    box-shadow: 0 5px 20px rgba(10, 132, 255, 0.3);

    transition: all 0.3s ease;

}


.mobile-cta-button:focus-visible {

    outline: 2px solid #ffffff;

    outline-offset: 2px;

}


.mobile-cta-button:hover {

    transform: scale(1.05);

    box-shadow: 0 8px 25px rgba(10, 132, 255, 0.4);

}


/* Mobile Menu Overlay */

.mobile-menu-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

    z-index: 9998;

}


.mobile-menu-overlay.active {

    opacity: 1;

    visibility: visible;

}


/* ===================================================== 

   Responsive Design 

   ===================================================== */

@media (max-width: 1200px) {

    .navbar {

        padding: 0.75rem 1.5rem;

    }

    

    .nav-menu {

        gap: 1.25rem;

    }

    

    .nav-link {

        font-size: 0.9rem;

    }

    

    .logo-img {

        height: 75px;

    }

    

    body.has-header {

        padding-top: 110px;

    }

}


@media (max-width: 992px) {

    .navbar {

        padding: 0.75rem 1rem;

    }

    

    .nav-menu {

        gap: 1rem;

    }

    

    .nav-link {

        font-size: 0.85rem;

    }

    

    .cta-button {

        padding: 0.65rem 1.5rem;

        font-size: 0.9rem;

    }

    

    .logo-img {

        height: 70px;

    }

    

    body.has-header {

        padding-top: 100px;

    }

}


@media (max-width: 768px) {

    .navbar {

        padding: 1rem;

        min-height: 70px;

    }


    #desktop-nav {

        display: none !important;

    }


    .hamburger-menu {

        display: block;

    }


    .logo-img {

        height: 60px;

        max-width: 200px;

    }

    

    .mobile-menu {

        width: 100%;

        max-width: 100%;

        padding-top: 90px;

    }

    

    .particles-wrapper {

        display: none;

    }

    

    body.has-header {

        padding-top: 90px;

    }

}


@media (max-width: 480px) {

    .navbar {

        padding: 0.75rem;

        min-height: 65px;

    }

    

    .logo-img {

        height: 50px;

        max-width: 180px;

    }

    

    .mobile-menu {

        padding-top: 80px;

    }

    

    .mobile-nav-link {

        padding: 1rem 1.5rem;

    }

    

    .mobile-nav-link:hover {

        padding-left: 2rem;

    }

    

    body.has-header {

        padding-top: 80px;

    }

}


/* Reduce motion for accessibility */

@media (prefers-reduced-motion: reduce) {

    .particle,

    .logo-shine,

    .reading-progress-bar::before {

        animation: none;

    }

    

    .logo:hover .logo-img {

        transform: scale(1.02);

    }

    

    .hamburger-inner,

    .hamburger-inner::before,

    .hamburger-inner::after {

        transition: none;

    }

}


/* High contrast mode support */

@media (prefers-contrast: high) {

    .nav-link {

        color: #000000;

    }

    

    .nav-link:hover {

        color: #0066cc;

    }

    

    .cta-button {

        background: #0066cc;

        border: 2px solid #ffffff;

    }

    

    .hamburger-inner,

    .hamburger-inner::before,

    .hamburger-inner::after {

        background: #000000;

    }

}

</improved_header_css>