/* --- WEBSITE GLOBAL STYLES --- */
    :root {
        --primary-color: #0d6efd;
        --secondary-color: #00c853;
        --dark-bg: #1e293b;
        --light-bg: #f0f2f5;

        /* Tool Specific Variables */
        --brand-primary: #1a237e;
        --brand-dark: #000051;
        --brand-accent: #ff6f00;
        --tool-surface: #ffffff;
    }

    body {
        background: var(--light-bg);
        font-family: 'Poppins', 'Hind', sans-serif;
        color: #333;
    }

    /* NAVBAR */
    .navbar { box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 15px 0; }
    .navbar-brand { font-weight: 700; color: var(--primary-color) !important; }
    .nav-link { font-weight: 500; color: #555 !important; margin: 0 5px; transition: 0.3s; }
    .nav-link:hover, .nav-link.active { color: var(--primary-color) !important; }




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




    /* Manual Section */
    .manual-card {
        background: white; border-radius: 12px; padding: 25px; margin-top: 30px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-top: 4px solid var(--brand-primary);
    }
    .manual-header { color: var(--brand-primary); font-size: 1.1rem; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-top: 0; font-weight: 700; }
    .step-item { display: flex; gap: 15px; margin-bottom: 15px; align-items: flex-start; }
    .step-icon {
        background: var(--brand-primary); color: white; width: 28px; height: 28px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; flex-shrink: 0; margin-top: 2px;
    }
    .step-text { font-size: 0.95rem; color: #555; line-height: 1.6; }
    .tip-box { background: #e0f7fa; padding: 15px; border-radius: 8px; font-size: 0.9rem; color: #006064; margin-top: 15px; border-left: 4px solid #00acc1; }

    /* FOOTER */
    footer { background: var(--dark-bg); color: #a0aec0; padding: 50px 0 20px; font-size: 14px; margin-top: 60px; }
    footer h5 { color: white; margin-bottom: 20px; font-weight: 600; }
    footer a { color: #a0aec0; text-decoration: none; display: block; margin-bottom: 10px; transition: 0.3s; }
    footer a:hover { color: white; padding-left: 5px; }
    .social-circle { width: 35px; height: 35px; background: rgba(255,255,255,0.1); display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; margin-right: 5px; color: white; transition: 0.3s; }
    .social-circle:hover { background: var(--primary-color); transform: translateY(-3px); }