/*
Theme Name: CWD
Theme URI: https://www.customwebdesigns.com
Author: Custom Web Designs, Inc.
Author URI: http://customwebdesigns.com
Description:AI Infused Web Design by CWD.
Version: 1.1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: CWD
Tested up to: 6.7.9
Requires PHP: 5.6
Tags: one-column, two-columns, left-sidebar, right-sidebar, custom-menu, featured-images, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, e-commerce, blog, portfolio

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

*/


/* Custom Web Designs - Override Theme Styles */
    .cwd-container * {
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .cwd-container {
        --primary: #0182e0 !important;
        --secondary: #1e40af !important;
        --accent: #60a5fa !important;
        --dark: #0a0a0a !important;
        --light: #ffffff !important;
        --glass: rgba(255, 255, 255, 0.05) !important;
        --glass-border: rgba(255, 255, 255, 0.1) !important;
        
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
        background: #0a0a0a !important;
        color: #ffffff !important;
        overflow-x: hidden !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3D Canvas Background */
    .cwd-container #canvas-bg {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    /* Hamburger Menu */
    .cwd-hamburger {
        position: fixed !important;
        top: 30px !important;
        right: 30px !important;
        width: 35px !important;
        height: 30px !important;
        cursor: pointer !important;
        z-index: 10000 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .cwd-hamburger span {
        display: block !important;
        height: 3px !important;
        width: 100% !important;
        background: linear-gradient(90deg, #0182e0, #60a5fa) !important;
        border-radius: 3px !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 0 10px rgba(1, 130, 224, 0.5) !important;
        animation: glow-pulse 2s ease-in-out infinite !important;
    }

    @keyframes glow-pulse {
        0%, 100% { box-shadow: 0 0 10px rgba(1, 130, 224, 0.5); }
        50% { box-shadow: 0 0 20px rgba(1, 130, 224, 0.8), 0 0 30px rgba(1, 130, 224, 0.6); }
    }

    .cwd-hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px) !important;
    }

    .cwd-hamburger.active span:nth-child(2) {
        opacity: 0 !important;
    }

    .cwd-hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(8px, -8px) !important;
    }

 /* UPDATE: Navigation Menu - Adjusted padding since we removed the close button */
    .cwd-nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: -400px !important;
        width: 400px !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        transition: right 0.3s ease !important;
        z-index: 9999 !important;
        padding: 100px 50px !important; /* Keep the same padding */
        border-left: 1px solid rgba(1, 130, 224, 0.3) !important;
    }

    .cwd-nav-menu.active {
        right: 0 !important;
    }


    .cwd-nav-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .cwd-nav-list li {
        margin-bottom: 30px !important;
        opacity: 0 !important;
        transform: translateX(30px) !important;
        animation: slideIn 0.5s ease forwards !important;
    }

    .cwd-nav-menu.active .cwd-nav-list li {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

    .cwd-nav-list li:nth-child(1) { animation-delay: 0.1s !important; }
    .cwd-nav-list li:nth-child(2) { animation-delay: 0.2s !important; }
    .cwd-nav-list li:nth-child(3) { animation-delay: 0.3s !important; }
    .cwd-nav-list li:nth-child(4) { animation-delay: 0.4s !important; }
    .cwd-nav-list li:nth-child(5) { animation-delay: 0.5s !important; }

    @keyframes slideIn {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .cwd-nav-list a {
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 2rem !important;
        font-weight: 700 !important;
        transition: all 0.3s ease !important;
        display: inline-block !important;
    }

    .cwd-nav-list a:hover {
        color: #0182e0 !important;
        transform: translateX(10px) !important;
    }

    /* Hero Chat Section */
    .cwd-hero-subtitle-container {
        min-height: 30px !important;
        margin-bottom: 2rem !important;
    }

    .cwd-hero-chat-section {
        margin-top: 2rem !important;
    }

    .cwd-hero-chat-btn {
        background: linear-gradient(135deg, #0182e0, #1e40af) !important;
        border: none !important;
        color: white !important;
        padding: 1rem 2rem !important;
        border-radius: 50px !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 12px !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
        box-shadow: 0 4px 20px rgba(1, 130, 224, 0.3) !important;
    }

    .cwd-hero-chat-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 30px rgba(1, 130, 224, 0.5) !important;
    }

    .cwd-pulse-dot {
        position: absolute !important;
        left: 20px !important;
        width: 10px !important;
        height: 10px !important;
        background: #48d856 !important;
        border-radius: 50% !important;
        animation: pulse-dot 2s infinite !important;
    }

    @keyframes pulse-dot {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.5); opacity: 0.5; }
    }

    .cwd-hero-chat-preview {
        margin-top: 1.5rem !important;
        padding: 1rem 1.5rem !important;
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 20px !important;
        border: 1px solid rgba(1, 130, 224, 0.2) !important;
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        opacity: 0 !important;
        animation: fadeInUp 1s ease 0.5s forwards !important;
    }

    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(-10px);
        }
    }

    .cwd-chat-preview-header {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .cwd-typing-dots {
        display: inline-flex !important;
        gap: 3px !important;
    }

    .cwd-typing-dots span {
        width: 8px !important;
        height: 8px !important;
        background: #0182e0 !important;
        border-radius: 50% !important;
        animation: typing 1.4s infinite !important;
    }

    .cwd-preview-text {
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 0.95rem !important;
    }

    /* Voice Controls */
    .cwd-voice-btn {
        background: transparent !important;
        border: none !important;
        color: #8e8e93 !important;
        cursor: pointer !important;
        padding: 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s !important;
    }

    .cwd-voice-btn:hover {
        color: #0182e0 !important;
    }

    .cwd-voice-btn.active {
        color: #48d856 !important;
        animation: pulse 2s infinite !important;
    }

    .cwd-voice-input-btn {
        background: transparent !important;
        border: 1px solid #3a3a3c !important;
        border-radius: 50% !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: #8e8e93 !important;
        transition: all 0.2s !important;
    }

    .cwd-voice-input-btn:hover {
        background: rgba(1, 130, 224, 0.1) !important;
        color: #0182e0 !important;
    }

    .cwd-voice-input-btn.recording {
        background: #ff3b30 !important;
        color: white !important;
        animation: pulse 1s infinite !important;
    }

    /* Hero Section adjustment */
    .cwd-container .cwd-hero {
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2rem !important;
        position: relative !important;
        background: transparent !important;
        z-index: 10 !important;
        margin-top: -80px !important; /* Pull hero back up */
    }

    .cwd-container .cwd-hero-content {
        max-width: 1200px !important;
        width: 100% !important;
        text-align: center !important;
        z-index: 20 !important;
        position: relative !important;
    }

    .cwd-container .cwd-hero-title {
        font-size: clamp(2.5rem, 8vw, 5rem) !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
        margin-bottom: 1.5rem !important;
        background: linear-gradient(135deg, #ffffff 0%, #0182e0 50%, #1e40af 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        animation: gradient-shift 3s ease infinite !important;
        text-transform: none !important;
        letter-spacing: normal !important;
    }

    @keyframes gradient-shift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }

    .cwd-container .cwd-hero-subtitle {
        font-size: clamp(1rem, 3vw, 1.5rem) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        margin-bottom: 3rem !important;
        font-weight: 300 !important;
        line-height: 1.4 !important;
    }

    /* AI Chat Interface */
    .cwd-container .cwd-ai-chat-container {
        max-width: 600px !important;
        margin: 0 auto 3rem !important;
        position: relative !important;
        padding: 0 !important;
    }

    .cwd-container .cwd-ai-chat-box {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 2rem !important;
        padding: 1.5rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
    }

    .cwd-container .cwd-ai-chat-box:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 20px 40px rgba(1, 130, 224, 0.2) !important;
        border-color: #0182e0 !important;
    }

    .cwd-container .cwd-ai-avatar {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        background: linear-gradient(135deg, #0182e0, #1e40af) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        animation: pulse 2s infinite !important;
        color: #ffffff !important;
        padding: 0 !important;
    }

    .cwd-container .cwd-ai-avatar svg {
        width: 30px !important;
        height: 30px !important;
        stroke: #ffffff !important;
    }

    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }

    .cwd-container .cwd-ai-chat-input {
        flex: 1 !important;
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        font-size: 1rem !important;
        outline: none !important;
        padding: 0.5rem !important;
        font-family: inherit !important;
    }

    .cwd-container .cwd-ai-chat-input::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    .cwd-container .cwd-send-icon {
        color: #ffffff !important;
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
    }

    /* Services Grid */
    .cwd-container .cwd-services {
        padding: 5rem 2rem !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        position: relative !important;
        z-index: 10 !important;
        background: #0a0a0a !important;
    }

    .cwd-container .cwd-services-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
        gap: 2rem !important;
        margin-top: 3rem !important;
        padding: 0 !important;
    }

    .cwd-container .cwd-service-card {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 1.5rem !important;
        padding: 2.5rem !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .cwd-container .cwd-service-card::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(135deg, transparent, rgba(0, 255, 204, 0.1)) !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }

    .cwd-container .cwd-service-card:hover {
        transform: translateY(-10px) scale(1.02) !important;
        border-color: #0182e0 !important;
    }

    .cwd-container .cwd-service-card:hover::before {
        opacity: 1 !important;
    }

    .cwd-container .cwd-service-icon {
        width: 60px !important;
        height: 60px !important;
        background: linear-gradient(135deg, #0182e0, #1e40af) !important;
        border-radius: 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 1.5rem !important;
        font-size: 1.5rem !important;
        padding: 0 !important;
    }

    .cwd-container .cwd-service-title {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        margin-bottom: 1rem !important;
        color: #ffffff !important;
        line-height: 1.3 !important;
    }

    .cwd-container .cwd-service-description {
        color: rgba(255, 255, 255, 0.7) !important;
        line-height: 1.6 !important;
        font-size: 1rem !important;
    }

    /* Stats Section */
    .cwd-container .cwd-stats {
        padding: 5rem 2rem !important;
        background: linear-gradient(135deg, rgba(1, 130, 224, 0.1), rgba(30, 64, 175, 0.1)) !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .cwd-container .cwd-stats-grid {
        max-width: 1200px !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 2rem !important;
        padding: 0 !important;
    }

    .cwd-container .cwd-stat-card {
        text-align: center !important;
        padding: 2rem !important;
    }

    .cwd-container .cwd-stat-number {
        font-size: 3rem !important;
        font-weight: 900 !important;
        background: linear-gradient(135deg, #0182e0, #1e40af) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.2 !important;
    }

    .cwd-container .cwd-stat-label {
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
    }

    /* CTA Section */
    .cwd-container .cwd-cta {
        padding: 5rem 2rem !important;
        text-align: center !important;
        position: relative !important;
        z-index: 10 !important;
        background: #0a0a0a !important;
    }

    .cwd-container .cwd-cta h2 {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
        color: #ffffff !important;
        font-weight: 800 !important;
    }

    .cwd-container .cwd-cta p {
        color: rgba(255, 255, 255, 0.7) !important;
        margin-bottom: 2rem !important;
        font-size: 1.2rem !important;
    }

    .cwd-container .cwd-cta-button {
        display: inline-block !important;
        padding: 1.25rem 3rem !important;
        background: linear-gradient(135deg, #0182e0, #1e40af) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 1.1rem !important;
        border-radius: 2rem !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
        border: none !important;
        cursor: pointer !important;
    }

    .cwd-container .cwd-cta-button:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 20px 40px rgba(1, 130, 224, 0.3) !important;
        color: #ffffff !important;
    }

    /* Floating Chat Widget - Apple Messages Style */
    .cwd-chat-fab {
        position: fixed !important;
        bottom: 30px !important;
        right: 30px !important;
        width: 60px !important;
        height: 60px !important;
        border-radius: 30px !important;
        background: linear-gradient(135deg, #0182e0, #1e40af) !important;
        border: none !important;
        cursor: pointer !important;
        box-shadow: 0 4px 20px rgba(1, 130, 224, 0.4) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 9998 !important;
        transition: all 0.3s ease !important;
        color: white !important;
    }

    .cwd-chat-fab:hover {
        transform: scale(1.1) !important;
        box-shadow: 0 6px 30px rgba(1, 130, 224, 0.6) !important;
    }

    .cwd-chat-notification {
        position: absolute !important;
        top: -5px !important;
        right: -5px !important;
        background: #ff3b30 !important;
        color: white !important;
        border-radius: 12px !important;
        padding: 2px 8px !important;
        font-size: 12px !important;
        font-weight: bold !important;
        display: none !important;
    }

    .cwd-ai-chat-widget {
        position: fixed !important;
        bottom: 100px !important;
        right: 30px !important;
        width: 380px !important;
        height: 600px !important;
        background: #000000 !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
        display: none !important;
        flex-direction: column !important;
        overflow: hidden !important;
        z-index: 9999 !important;
        border: 1px solid #2c2c2e !important;
        resize: both !important;
        min-width: 320px !important;
        min-height: 400px !important;
        max-width: 500px !important;
        max-height: 80vh !important;
    }

    .cwd-ai-chat-widget.active {
        display: flex !important;
    }

    .cwd-ai-chat-widget.minimized {
        height: 60px !important;
        min-height: 60px !important;
        resize: none !important;
    }

    .cwd-chat-header {
        background: #1c1c1e !important;
        padding: 15px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 1px solid #2c2c2e !important;
        cursor: move !important;
        user-select: none !important;
    }

    .cwd-chat-header-info {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .cwd-ai-avatar-small {
        width: 32px !important;
        height: 32px !important;
        background: linear-gradient(135deg, #0182e0, #1e40af) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .cwd-chat-title {
        color: #ffffff !important;
        font-weight: 600 !important;
        font-size: 14px !important;
    }

    .cwd-chat-status {
        color: #48d856 !important;
        font-size: 11px !important;
    }

    .cwd-chat-controls {
        display: flex !important;
        gap: 10px !important;
    }

    .cwd-minimize-btn, .cwd-close-btn {
        background: transparent !important;
        border: none !important;
        color: #8e8e93 !important;
        font-size: 24px !important;
        cursor: pointer !important;
        padding: 0 !important;
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        transition: all 0.2s !important;
    }

    .cwd-minimize-btn:hover, .cwd-close-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }

    .cwd-ai-chat-widget .cwd-chat-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 20px !important;
        background: #000000 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .cwd-ai-chat-widget.minimized .cwd-chat-messages {
        display: none !important;
    }

    .cwd-ai-chat-widget .cwd-message {
        max-width: 70% !important;
        padding: 10px 16px !important;
        border-radius: 18px !important;
        position: relative !important;
        word-wrap: break-word !important;
        line-height: 1.4 !important;
        font-size: 15px !important;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
        text-align: left !important; /* Force left alignment */
    }

    .cwd-ai-chat-widget .cwd-message.user {
        background: #0182e0 !important;
        color: #ffffff !important;
        margin-left: auto !important;
        border-bottom-right-radius: 4px !important;
        text-align: left !important; /* Left align user text */
    }

    .cwd-ai-chat-widget .cwd-message.ai {
        background: #1c1c1e !important;
        color: #ffffff !important;
        margin-right: auto !important;
        border-bottom-left-radius: 4px !important;
        text-align: left !important; /* Left align AI text */
    }

    .cwd-message-time {
        font-size: 11px !important;
        opacity: 0.6 !important;
        margin-top: 4px !important;
        display: block !important;
        text-align: center !important; /* Center timestamps */
    }

    .cwd-chat-input-area {
        padding: 12px !important;
        background: #1c1c1e !important;
        border-top: 1px solid #2c2c2e !important;
        display: flex !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .cwd-ai-chat-widget.minimized .cwd-chat-input-area {
        display: none !important;
    }

    .cwd-ai-chat-widget .cwd-ai-chat-input {
        flex: 1 !important;
        background: #2c2c2e !important;
        border: 1px solid #3a3a3c !important;
        border-radius: 20px !important;
        padding: 8px 16px !important;
        color: #ffffff !important;
        font-size: 14px !important;
        outline: none !important;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    }

    .cwd-ai-chat-widget .cwd-ai-chat-input::placeholder {
        color: #8e8e93 !important;
    }

    .cwd-ai-chat-widget .cwd-send-button {
        background: #0182e0 !important;
        border: none !important;
        border-radius: 50% !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        color: white !important;
        padding: 0 !important;
    }

    .cwd-ai-chat-widget .cwd-send-button:hover {
        background: #1e40af !important;
        transform: scale(1.1) !important;
    }

    /* Typing indicator */
    .cwd-ai-chat-widget .cwd-typing {
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        padding: 0 !important;
    }

    .cwd-ai-chat-widget .cwd-typing span {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: #8e8e93 !important;
        animation: typing 1.4s infinite !important;
    }

    /* Scrollbar styling */
    .cwd-ai-chat-widget .cwd-chat-messages::-webkit-scrollbar {
        width: 6px !important;
    }

    .cwd-ai-chat-widget .cwd-chat-messages::-webkit-scrollbar-track {
        background: transparent !important;
    }

    .cwd-ai-chat-widget .cwd-chat-messages::-webkit-scrollbar-thumb {
        background: #3a3a3c !important;
        border-radius: 10px !important;
    }

    /* Remove old chat styles from hero section */
    .cwd-container .cwd-ai-chat-container {
        display: none !important;
    }

    @keyframes typing {
        0%, 60%, 100% {
            transform: translateY(0);
            opacity: 0.5;
        }
        30% {
            transform: translateY(-10px);
            opacity: 1;
        }
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Particle effect */
    .cwd-particle {
        position: fixed !important;
        background: #0182e0 !important;
        border-radius: 50% !important;
        pointer-events: none !important;
        opacity: 0.5 !important;
        animation: particle-float 10s infinite ease-in-out !important;
        z-index: 5 !important;
    }

    @keyframes particle-float {
        0%, 100% {
            transform: translateY(0) translateX(0);
            opacity: 0;
        }
        10% {
            opacity: 0.5;
        }
        90% {
            opacity: 0.5;
        }
        100% {
            transform: translateY(-100vh) translateX(100px);
            opacity: 0;
        }
    }

    /* About Section */
    .cwd-container .cwd-about {
        padding: 5rem 2rem !important;
        background: #0a0a0a !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .cwd-container .cwd-about-container {
        max-width: 1200px !important;
        margin: 0 auto !important;
    }

    .cwd-container .cwd-section-title {
        font-size: 2.5rem !important;
        font-weight: 800 !important;
        text-align: center !important;
        margin-bottom: 3rem !important;
        background: linear-gradient(135deg, #ffffff 0%, #0182e0 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }

    .cwd-container .cwd-about-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)) !important;
        gap: 3rem !important;
    }

    .cwd-container .cwd-about-card {
        padding: 2rem !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 1rem !important;
        border-left: 3px solid #0182e0 !important;
    }

    .cwd-container .cwd-about-title {
        font-size: 1.8rem !important;
        color: #0182e0 !important;
        margin-bottom: 1.5rem !important;
        font-weight: 700 !important;
    }

    .cwd-container .cwd-about-text {
        color: rgba(255, 255, 255, 0.8) !important;
        line-height: 1.8 !important;
        font-size: 1.05rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Authority Section */
    .cwd-container .cwd-authority {
        padding: 5rem 2rem !important;
        background: linear-gradient(135deg, rgba(1, 130, 224, 0.05), rgba(30, 64, 175, 0.05)) !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .cwd-container .cwd-authority-container {
        max-width: 1200px !important;
        margin: 0 auto !important;
    }

    .cwd-container .cwd-credentials-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }
    
    @media (max-width: 1024px) {
        .cwd-container .cwd-credentials-grid {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }

    .cwd-container .cwd-credential-card {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 1rem !important;
        padding: 2rem !important;
        text-align: center !important;
        transition: all 0.3s ease !important;
    }

    .cwd-container .cwd-credential-card:hover {
        transform: translateY(-5px) !important;
        border-color: #0182e0 !important;
        box-shadow: 0 10px 30px rgba(1, 130, 224, 0.2) !important;
    }

    .cwd-container .cwd-credential-icon {
        font-size: 3rem !important;
        margin-bottom: 1rem !important;
    }

    .cwd-container .cwd-credential-title {
        font-size: 1.3rem !important;
        color: #ffffff !important;
        margin-bottom: 1rem !important;
        font-weight: 600 !important;
    }

    .cwd-container .cwd-credential-text {
        color: rgba(255, 255, 255, 0.7) !important;
        line-height: 1.6 !important;
    }

    /* Trust Section */
    .cwd-container .cwd-trust {
        padding: 5rem 2rem !important;
        background: #0a0a0a !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .cwd-container .cwd-trust-container {
        max-width: 1200px !important;
        margin: 0 auto !important;
    }

    .cwd-container .cwd-trust-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
        gap: 2.5rem !important;
    }

    .cwd-container .cwd-trust-card {
        padding: 2rem !important;
        background: rgba(1, 130, 224, 0.05) !important;
        border-radius: 1rem !important;
        border-top: 2px solid #0182e0 !important;
    }

    .cwd-container .cwd-trust-title {
        font-size: 1.5rem !important;
        color: #60a5fa !important;
        margin-bottom: 1rem !important;
        font-weight: 600 !important;
    }

    .cwd-container .cwd-trust-text {
        color: rgba(255, 255, 255, 0.8) !important;
        line-height: 1.7 !important;
        font-size: 1rem !important;
    }

    /* Process Section */
    .cwd-container .cwd-process {
        padding: 5rem 2rem !important;
        background: linear-gradient(180deg, #0a0a0a 0%, rgba(1, 130, 224, 0.03) 100%) !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .cwd-container .cwd-process-container {
        max-width: 1000px !important;
        margin: 0 auto !important;
    }

    .cwd-container .cwd-timeline {
        position: relative !important;
        padding-left: 3rem !important;
    }

    .cwd-container .cwd-timeline::before {
        content: '' !important;
        position: absolute !important;
        left: 1rem !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 2px !important;
        background: linear-gradient(180deg, #0182e0 0%, #1e40af 100%) !important;
    }

    .cwd-container .cwd-timeline-item {
        position: relative !important;
        margin-bottom: 3rem !important;
    }

    .cwd-container .cwd-timeline-marker {
        position: absolute !important;
        left: -2.5rem !important;
        top: 0 !important;
        width: 2rem !important;
        height: 2rem !important;
        background: linear-gradient(135deg, #0182e0, #1e40af) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: bold !important;
        color: #ffffff !important;
    }

    .cwd-container .cwd-timeline-content h3 {
        color: #0182e0 !important;
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
        font-weight: 600 !important;
    }

    .cwd-container .cwd-timeline-content p {
        color: rgba(255, 255, 255, 0.8) !important;
        line-height: 1.7 !important;
        font-size: 1rem !important;
    }

    /* FAQ Section */
    .cwd-container .cwd-faq {
        padding: 5rem 2rem !important;
        background: #0a0a0a !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .cwd-container .cwd-faq-container {
        max-width: 1200px !important;
        margin: 0 auto !important;
    }

    .cwd-container .cwd-faq-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)) !important;
        gap: 2rem !important;
    }

    .cwd-container .cwd-faq-item {
        background: rgba(255, 255, 255, 0.03) !important;
        padding: 2rem !important;
        border-radius: 1rem !important;
        border-left: 3px solid #0182e0 !important;
        transition: all 0.3s ease !important;
    }

    .cwd-container .cwd-faq-item:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        transform: translateX(5px) !important;
    }

    .cwd-container .cwd-faq-question {
        color: #60a5fa !important;
        font-size: 1.2rem !important;
        margin-bottom: 1rem !important;
        font-weight: 600 !important;
    }

    .cwd-container .cwd-faq-answer {
        color: rgba(255, 255, 255, 0.7) !important;
        line-height: 1.6 !important;
        font-size: 1rem !important;
    }


    /* Mobile Responsive */
    @media (max-width: 768px) {
        .cwd-container .cwd-services-grid {
            grid-template-columns: 1fr !important;
        }
        
        .cwd-container .cwd-stats-grid {
            grid-template-columns: 1fr !important;
        }
        
        .cwd-container .cwd-hero {
            padding: 2rem 1rem !important;
        }
        
        .cwd-container .cwd-about-grid {
            grid-template-columns: 1fr !important;
        }
        
        .cwd-container .cwd-faq-grid {
            grid-template-columns: 1fr !important;
        }
        
        .cwd-container .cwd-credentials-grid {
            grid-template-columns: 1fr !important;
        }
        
        .cwd-container .cwd-trust-grid {
            grid-template-columns: 1fr !important;
        }
    }