/* --- General  CSS Styling  --- */ /* CSS Styling */

        :root {
            --background-dark: #1e1e1e;
            --background-light: #2c2c2c;     
            --background-dull: #1a1a1a;    /* Dull Background color [Ash Blue] */
            --background-main: #05070a;     /* Primary Background color [Dark Background] */
            --primary-color: #00bcd4; /* Cyan/Turquoise for modern look */
            --secondary-color: #ff9800; /* Orange/Amber for accents */
            --other-color: #5c5c8a; /* Header Color */
            --code-green: #00ff41;          /* Classic Terminal Green */
            --text-dip: #888;           /* Regulare  Dull-Ashe Text*/     
            --text-norm: #b3bdcc;           /* Regulare  Mild-Ashe Paragraph Text*/     
            --text-white: #ffff;          /* Bright White Paragraph Text [Bright White]*/
            --text-light: #ffffff;
            --text-muted: #9e9e9e;
            --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            --border-radius: 8px;
            --padding-base: 20px;
            --glass: rgba(255, 255, 255, 0.05);    
            --opaque: rgba(255, 255, 255, 0.05);       /* Opaque Glass Effect */
            --font-family: 'Orbitron', sans-serif; /* Futuristic font */
            --glass-border: rgba(255, 255, 255, 0.1);
        }

        /* General Reset and Container */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-family);
            color: var(--text-light);
            line-height: 1.6;
            scroll-behavior: smooth;
            background-image: url('../../static/images/background.png');
            background-attachment: fixed;
            background-repeat: no-repeat;
            margin-top:-50px;
            margin-bottom:-50px;
        }
        
        /* --- General Section Styling --- */
        section {
            padding: 80px var(--padding-base);
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Utility Classes */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

/* --- HEADER STYLES --- */
        header {
            background-color: var(--other-color); /* Dark background for the header */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            padding: 15px 0;
            position: fixed;
            width: 100%;
            height: 100px;
            top: 5px;
            z-index: 1000;
        }

        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo img {
            float: left;
            margin-left: 20px;
            width: 80px; /* Reduced size for better fit */
            height: 80px;
        }

        .logo {
            text-decoration: none;
            color: white;
            font-size: 1.5em;
            display: block;
        }

        /* --- NAVIGATION STYLES (Default: Large Screen) --- */
        #main-nav ul {
            list-style: none;
            display: flex; /* Display items side-by-side */
            /* Added margin-right to pull ul away from lang selector */
            margin-right: 20px; 
        }

        #main-nav ul li a {
            text-decoration: none;
            color: var(--text-light);
            padding: 15px 20px;
            display: block;
            transition: color 0.3s, background-color 0.3s;
            border-radius: 5px;
            font-weight: 400;
        }

        #main-nav ul li a:hover {
            color: var(--background-dark);
            background-color: var(--primary-color);
        }

        /* --- HAMBURGER MENU STYLES --- */
        .hamburger {
            display: none; /* Hidden by default on large screens */
            cursor: pointer;
            padding: 10px;
            z-index: 100; /* Ensure it's above other content */
        }

        .bar {
            display: block;
            width: 25px;
            height: 3px;
            margin: 5px auto;
            background-color: var(--secondary-color);
            transition: all 0.3s ease-in-out;
        }

        /* --- MEDIA QUERY: SMALL SCREEN (Mobile View) --- */
        /* Mobile-First Navigation Toggle (Small Screen) */
        @media (max-width: 768px) {
            /* 1. Show the Hamburger Icon */
            .hamburger {
                display: block;
            }

            /* 2. Hide the regular navigation links */
            #main-nav {
                position: absolute;
                top: 100px; /* Position below the header/logo */
                left: 0;
                width: 100%;
                background-color: rgb(133, 133, 173); /* Background for the dropdown */
                max-height: 0; /* Start hidden */
                overflow: hidden; /* Hide overflow content */
                transition: max-height 0.3s ease-in-out;
                z-index: 50; /* Lower z-index than the language dropdown */
            }

            /* 3. Stack links vertically when displayed */
            #main-nav ul {
                flex-direction: column;
                text-align: center;
                padding: 10px 0;
                margin-right: 0;
            }

            #main-nav ul li a {
                padding: 10px;
                border-bottom: 1px solid #555;
            }

            /* 4. Class added by JavaScript to display the menu */
            #main-nav.active {
                max-height: 500px; /* Arbitrarily large enough value to show all links */
            }

            /* 5. Hamburger Icon Animation (The "X" or "bar-collapse" effect) */
            .hamburger.active .bar:nth-child(2) {
                opacity: 0; /* Hide the middle bar */
            }

            .hamburger.active .bar:nth-child(1) {
                transform: translateY(8px) rotate(45deg); /* Top bar rotates */
            }

            .hamburger.active .bar:nth-child(3) {
                transform: translateY(-8px) rotate(-45deg); /* Bottom bar rotates */
            }
        }

        /* --- Language Selector ---- */
        .lang {
            /* Key change: Position relative for absolute positioning of the dropdown list */
            position: relative; 
            display: inline-block;
            cursor: pointer;
            /* Key change: Push to the right and above other elements */
            margin-left: auto; /* Pushes the element to the far right */
            z-index: 100; /* Ensure it's above the nav menu (nav z-index is 50 in mobile) */
        }

        .langdrop {
            width: 50px; /*Adjust size as needed*/ 
            height: 50px;
            cursor: pointer;
            display: block; /* Make it block level for better sizing */
            transition: transform 0.3s ease; /* Keep the hover effect */
        }

        .langdrop:hover {
            transform: scale(1.1); /* Slightly more subtle hover */
        }

        .llist {
            display: none;
            /* Key change: Position absolute relative to .lang parent */
            position: absolute; 
            /* Key change: Align to the right edge of the icon */
            right: 0; 
            top: 100%; /* Position just below the icon */
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
            /* Key change: Ensure it's above the navigation menu */
            z-index: 200; 
            border-radius: var(--border-radius);
            overflow: hidden;
        }

        .llist a {
            color: var(--background-dark); /* Changed to dark for contrast on light background */
            background-color: #a5a5c0; 
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left; /* Align text to the left for better readability */
            float: none; /* Removed float to stack links vertically */
            transition: background-color 0.2s;
        }

        .llist a:hover {
            background-color: var(--primary-color);
            color: var(--background-dark);
        }

        /*----Class to show the dropdown----*/
        .show {
            display: block;
        }

        h2 {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 50px;
            font-size: 2.5em;
            text-transform: capitalize;
            letter-spacing: 2px;
        }

        h3 {
            color: var(--secondary-color);
            margin-top: 20px;
            margin-bottom: 15px;
            font-size: 1.5em;
        }
        
        h4 {
            font-size: 1.0rem; 
            color: var(--secondary-color);
            margin: 10px;
        }


/* --- Hero Section --- */
        #hero {
            box-shadow: 5px 5px 4px 5px #888888; 
            border-radius: 0px 0px 5px 5px; 
            border-top:ridge blueviolet; 
            text-align: justify; 
            height: auto; 
            display: block;
            position: relative;
            font-size: 12px;
            margin-top: 90px;
            margin-bottom: 15px;
            text-align: center;
            padding: 150px var(--padding-base);
        }

        #hero h1 {
            font-size: 3.5em;
            color: var(--text-light);
            margin-bottom: 10px;
        }

        #hero p {
            font-size: 1.5em;
            color: var(--primary-color);
            margin-top: 10px;
        }

/* --- About Me Section --- */
        #about {
            background-color: var(--background-light);
        }

        #about .bio {
            font-size: 1.1em;
            text-align: justify;
            max-width: 900px;
            margin: 0 auto;
        }

        .glass-home {
            background: var(--background-dark);
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(120px);
            margin: 2rem auto;
            max-width: 900px;
            border-radius: 15px;
            width: 90vw; /* 90% of screen width */
            box-shadow: 0 10px 20px rgba(0,0,0,0.7);
        }
        
        .glass-card{
            padding: 30px; 
            background:  var(--background-dark);
            border: 1px solid var(--glass-border);
            border-radius: 10px;
        }

        /* Simple Way To Animate: The glass-home element */
        .glass-home::after, .glass-home::before {
            content: '';
            position: absolute;
            height: 100%;
            width: 100%;
            background-image: conic-gradient(from var(--angle), #ff0000, #ff9800, #ffff00, #00ff00, #00bcd4, #0000ff, #8b00ff, #ff0000 );
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            z-index: -1;
            padding: 3px;
            border-radius: 10px;
            animation: 3s spin linear infinite;
        }

        @property --angle{
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
       }
        .glass-home::before {
            filter: blur(1.5rem);
            opacity: 0.5;
        }

        @keyframes spin{
            from{
                --angle: 360deg;
            }
            to{
                --angle: 0deg;
            }
        }

        
    /* --- Infograghic --- */
        /* Existing Global Styles (For context) */
        :root {
            --primary-color: #00bcd4;
            --secondary-color: #ff9800;
            /* ... other vars ... */
        }

        /* --- Infographic Wrapper (NEW - handles scrolling) --- */
        /* This container ensures that even on mobile, the content inside is scrollable. */
        #mid-wrapper {
            overflow-x: auto; /* Enables horizontal scrolling when content is too wide */
            padding-bottom: 10px; /* Optional: adds space for scrollbar visual */
        }

        /* --- Infographic Grid Container --- */
        #mid {
            margin-top: 45px;
            display: grid;
            /* On wider screens (default): Use auto-fit to make the columns flexible and responsive */
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
            gap: 20px;
            text-align: center;
            border-radius: 80px;
            /* IMPORTANT: Ensure it takes full width when content is small */
            width: 100%; 
        }

        /* --- Media Query for Small Screens (Max-width 768px, typical for phones/small tablets) --- */
        @media (max-width: 3000px) { /*max-width: 768px but changed to 3000px to remain scrollable in all devices.*/
            #mid {
                /* * On small screens, force the grid to create columns for ALL items 
                 * side-by-side, making the container much wider than the viewport.
                 * The 4 items need 150px each, so 600px total width. 
                 */
                grid-template-columns: repeat(8, 150px);
                /* * Force the grid container to be the minimum size required for all 
                 * columns, enabling the scroll on the wrapper.
                 */
                width: 620px; /* 4 columns * 150px wide + 3 gaps * 20px = 660px. Adjust as needed. */
                justify-content: start; /* Align content to the start */
            }
        }

        /* --- Item Styling (Kept as is for context) --- */
        #info {
            padding: 5px;
            border-bottom: 3px solid var(--primary-color);
            border-right: 3px solid var(--secondary-color);
            height: 100px;
            width: 100px;
            border-radius: 15%;
        }


        #low {
            padding: 5px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            border-bottom: 3px solid var(--primary-color);
            height: 150px;
        }
/* --- Skills Section --- */
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            text-align: left;
        }

        .skill-category {
            background-color: var(--background-dark);
            padding: var(--padding-base);
            border-radius: var(--border-radius);
            border-top: 4px solid var(--primary-color);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        .skill-category:hover {
            border-top: 4px solid var(--secondary-color);
            background-color: var(--glass);
        }

        .skill-category ul {
            list-style: none;
        }

        .skill-category .subhead {
            grid-column: 1 / -1;
            font-weight: bold;
            margin-top: 10px;
            color: var(--secondary-color);
        }

        .skill-category h3 {
            color: var(--primary-color);
            border-bottom: 2px solid var(--secondary-color);
            padding-bottom: 5px;
            margin-bottom: 15px;
            font-size: 17px;
        }

        .skill-category li {
            padding: 5px 0;
            position: relative;
            padding-left: 20px;
        }

        .skill-category li::before {
            content: '•';
            color: var(--secondary-color);
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
        }

        .skill-cat {
            background: var(--glass);
            border: 1px solid var(--glass-border);
            padding: var(--padding-base); /* Kept consistent with other cards*/
            backdrop-filter: blur(120px);
            border-radius: var(--border-radius);
            width: auto; /* Responsiveness, not a fix like 90vw restriction */
            grid-column: 1 / -1; /* To make it span across all available grid columns */
            background-color: var(--background-dark);
            border-top: 4px solid var(--primary-color);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        .skill-cat:hover {
            border-top: 4px solid var(--secondary-color);
            background-color: var(--glass);
        }


        /* Adjustments for the list inside to make better use of the wide space */
        .skill-cat ul {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }

        /* Ensure the sub-headers (Automation/Design) still look good */
        .skill-cat .subhead {
            grid-column: 1 / -1;
            font-weight: bold;
            margin-top: 10px;
            color: var(--secondary-color);
        }

        .skill-cat h3 {
            color: var(--primary-color);
            border-bottom: 2px solid var(--secondary-color);
            padding-bottom: 5px;
            margin-bottom: 15px;
        }

        .skill-cat li {
            padding: 5px 0;
            position: relative;
            padding-left: 20px;
        }

        .skill-cat li::before {
            content: '•';
            color: var(--secondary-color);
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
        }

/* --- Projects Section --- */
        .projects-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .project-card {
            position: relative; /* Required for pseudo-elements */
            background-color: var(--background-light);
            border-radius: var(--border-radius);
            padding: var(--padding-base);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
            /* We remove the fixed border-left to allow the animation to
        surround the card */
            border: none;
            overflow: hidden; /* Clips the rotating gradient */
            z-index: 1;
            transition: transform 0.3s;
            text-decoration: none;
            color: var(--text-white) !important;
        }

        /* The Animated Background Layer */
        .project-card::before {
            content: '';
            position: absolute;
            /* Centered larger than the card to ensure corners are covered
        during rotation */
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            /* Default: Moving your 3 specific colors Right to Left
        (Counter-Clockwise) */
            background: conic-gradient(
                var(--primary-color),
                var(--secondary-color),
                var(--other-color),
                var(--primary-color)
        );
             animation: revolveRightToLeft 4s linear infinite;
            z-index: -2;
        }
        /* The Inner Mask (Makes the center dark so only the edge shows as a
        border) */
        .project-card::after {
            content: '';
            position: absolute;
            inset: 4px; /* Thickness of the border */
            background: var(--background-light);
            border-radius: calc(var(--border-radius) - 2px);
            z-index: -1;
        }
        /* Ensure text stays visible and white */
        .project-card h3, .project-card h4, .project-card p {
            position: relative;
        z-index: 2; }
        /* --- HOVER STATE --- */
        .project-card:hover::before {
            /* Full Rainbow Colors */
            background: conic-gradient(
                #ff0000, #ff9800, #ffff00, #00ff00, #00bcd4, #0000ff, #8b00ff,
        #ff0000 );
            /* Reverse direction: Left to Right (Clockwise) */
            animation: revolveLeftToRight 2s linear infinite;
        }
        .project-card:hover {
            transform: translateY(-5px);
        }
        /* --- ANIMATIONS --- */
        /* Right to Left (Counter-Clockwise) */
        @keyframes revolveRightToLeft {
            from { transform: rotate(360deg); }
            to { transform: rotate(0deg); }
        }
        /* Left to Right (Clockwise) */
        @keyframes revolveLeftToRight {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }

        }0

 Shuffling Project Cards Style *
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* --- Experience Section --- */                                                  
        .datemark {
            color: var(--text-muted);
            font-style: italic;
            margin-bottom: 15px;
            font-size: 0.9em;
         }

         /* --- Experience Section --- */
        .experience-timeline {
            position: relative;
            max-width: 1000px;
            margin: 0 auto;
        }

        .experience-timeline::after {
            content: '';
            position: absolute;
            width: 3px;
            background-color: var(--primary-color);
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -3px;
        }

        .timeline-item {
            padding: 10px 40px;
            position: relative;
            background-color: inherit;
            width: 50%;
        }
        
        .timeline-item::after {
            content: '';
            position: absolute;
            width: 25px;
            height: 25px;
            right: -17px;
            background-color: var(--background-light);
            border: 4px solid var(--secondary-color);
            top: 15px;
            border-radius: 50%;
            z-index: 1;
        }
        .left {
            left: 0;
        }

        .right {
            left: 50%;
        }

        .left::before {
            content: " ";
            height: 0;
            position: absolute;
            top: 22px;
            width: 0;
            z-index: 1;
            right: 30px;
            border: medium solid var(--background-light);
            border-width: 10px 0 10px 10px;
            border-color: transparent transparent transparent var(--background-light);
        }

        .right::before {
            content: " ";
            height: 0;
            position: absolute;
            top: 22px;
            width: 0;
            z-index: 1;
            left: 30px;
            border: medium solid var(--background-light);
            border-width: 10px 10px 10px 0;
            border-color: transparent var(--background-light) transparent transparent;
        }

        .right::after {
            left: -17px;
        }

        .timeline-content:hover {
            box-shadow: 6px 5px 5px rgba(1, 1, 1, 0.9);
        }

        .timeline-content {
            padding: 20px 30px;
            background-color: var(--background-light);
            position: relative;
            border-radius: var(--border-radius);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        }
        
        .timeline-content h4 {
            color: var(--secondary-color);
            margin-bottom: 5px;
        }

        .timeline-content .date {
            color: var(--primary-color);
            display: block;
            margin-bottom: 10px;
            font-style: italic;
        }
        
        .timeline-content ul {
            list-style-type: disc;
            margin-left: 20px;
        }

        .timeline-content li {
            margin-bottom: 5px;
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            #hero h1 {
                font-size: 2.5em;
            }

            #hero p {
                font-size: 1.2em;
            }

            h2 {
                font-size: 2em;
            }

            .experience-timeline::after {
                left: 31px;
            }

            .timeline-item {
                width: 100%;
                padding-left: 70px;
                padding-right: 25px;
            }

            .timeline-item::before {
                left: 60px;
                border: medium solid var(--background-light);
                border-width: 10px 10px 10px 0;
                border-color: transparent var(--background-light) transparent transparent;
            }

            .left::after, .right::after {
                left: 15px;
            }

            .right {
                left: 0%;
            }

            .contact-info {
                flex-direction: column;
                align-items: center;
            }
        }

        /* Progress Bar Container - 5 minutes count down. */
        .projects-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .nav-btn {
            padding: 10px 20px;
            margin: 10px;
            background: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }

        .timer-container {
            width: 80%;
            height: 6px;
            background: #eee;
            margin: 20px auto;
            border-radius: 3px;
            overflow: hidden;
        }

        .timer-bar {
            width: 100%;
            height: 100%;
            background: var(--primary-color);
            transition: width 1s linear;
        }

/* --- Education Section --- */

        .edu-cert-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .edu-card {
            background-color: var(--background-dark);
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            border-bottom: 3px solid var(--primary-color);
            z-index: 1;
        }
        
        .edu-card h4 {
            color: var(--secondary-color);
            font-size: 1.3em;
            margin-bottom: 5px;
        }
        
        .edu-card p {
            font-size: 0.95em;
            margin-bottom: 15px;
            color: var(--text-muted);
        }
        
        .edu-card:hover{
            background-color: var(--background-light);
            box-shadow: 0 4px 8px rgba(1, 10, 110, 0.9);
            border-bottom: 4px solid var(--secondary-color);
        }

    /* --- Educate-Contact ---*/ 

        .Educate-Contact {
            font-size: 2.5em;
            color: var(--primary-color);
            margin-bottom: 40px;
            text-align: center;
            text-transform: none;
            letter-spacing: 2px;
            padding-top: 60px; /* Space for fixed header */
        }

        .contact-grid {
            display: flex;
            gap: 10px;
            padding-bottom: 60px;
        }
        

/* --- Contact Me Section ----*/

        .contact-info {
            list-style: none;
            padding: 0;
            margin-top: 20px;
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .contact-info li {
            padding: 10px;
            border-left: 3px solid var(--secondary-color);
        }

        .contact-info a {
            color: var(--text-light);
            text-decoration: none;
            transition: color 0.3s;
        }

        .contact-info a:hover {
            color: var(--primary-color);
        }

        .info-contact{
            flex: 1;
            padding: 20px;
            background-color: var(--surface-dark);
            border-radius: 8px;
            border-top: 3px solid var(--primary-color);
        }
        
        .info-contact h3 {
            color: var(--primary-color);
            margin-bottom: 20px;
            font-size: 1.5em;
        }
        
       .info-contact p {
            margin-bottom: 10px;
        }


    /* --- Comment Form ----*/

        .comment-form {
            flex: 2;
            padding: 20px;
            background-color: var(--background-light);
            border-radius: 8px;
            border-top: 3px solid var(--secondary-color);
            align-items: center;
            border-radius: var(--border-radius);
        }

        .comment-form input[type="text"],
        .comment-form input[type="email"],
        .comment-form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #555;
            border-radius: 4px var(--text-muted);
            background-color: #333;
            color: var(--text-light);
            font-family: var(--font-family);
        }

        .comment-form textarea {
            resize: vertical;
        }

        .comment-form button {
            background-color: var(--primary-color);
            color: var(--background-dark);
            border: none;
            padding: 12px 20px;
            cursor: pointer;
            border-radius: 4px;
            font-weight: bold;
            transition: background-color 0.3s;
        }

        .comment-form button:hover {
            background-color: var(--secondary-color);
        }

        .glass-do {
            background: var(--glass);
            border: 1px solid var(--glass-border);
            padding: 30px;
            backdrop-filter: blur(120px);
            margin-bottom: 2rem auto;
            width: auto; /* Responsiveness, not a fix like 90vw restriction */
            grid-column: 1 / -1; /* To make it span across all available grid columns */
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.7);
        }

/* --- Footer --- */
        footer {
            padding: 20px var(--padding-base);
            background-color: var(--background-dark);
            border-top: 1px solid #333;
            font-size: 0.9em;
            color: #aaa;
            margin-top: -50px;

        }
         footer p{
            text-align: center;
            align-items: center;
        }  

        footer a{
            text-decoration: none;
            font-size: 1.0em;
            color: var(--other-color);
        } 

        footer a:hover{
            text-decoration: none;
            font-size: 1.0em;
            color: var(--primary-color);
        }

/*----- Sentinel Dashboard Theme For The Web Crawler Display -------*/

.devOps{
    max-height: 740px;
    padding: 25px;
    margin: 20px 0 20px 0;
    border-radius: 12px; 
    border: 2px solid var(--glass-border);
    box-shadow: 0 4px 6px var(--opaque); 
    font-family:  'Courier New', monospace !important;
    font-size: 16px;
    overflow-x: scroll;
    background-color: var(--background-main) !important;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(112, 0, 255, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0, 242, 255, 0.1) 0%, transparent 40%) !important;
} 
.devOps h4{
    margin-top: 0;  
    text-align: center;
    padding-bottom: 15px;
    color: var(--primary-color); 
    border-bottom: 2px solid var(--other-color); 
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 1.7em;
    font-family: 'impact', sans-serif;
}
.devOps hr{
    margin: 10px  0 20px 0;  
    border-bottom: 2px solid var(--code-green); 
}

.devOps h5 {
    border-left: 5px solid var(--code-green);    
    border-radius: 8px; 
    padding-left: 10px;
    margin: 20px 0 10px 0;
    color: var(--primary-cyan);
    font-size: 1.0em;
    font-family: 'Courier New', monospace;

}

/* ForraCorp Logo Active Pulse Effect */
#devOpsImg{
    max-width: 50px;
    max-height: 50px;
    filter: drop-shadow(0 0 15px var(--primary-cyan));
    margin-bottom: -15px;
    animation: blink 3s infinite;
}
    @keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 0.3; }
        100% { opacity: 1; }
    }

.sitrep span{
    font-size: 1.0rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: var(--code-green);
    text-transform: uppercase;
}

#update-time {
    font-size: 0.95rem;
    color: var(--text-white);
    margin-bottom: 25px;
    font-family: 'Courier New', monospace;
}
#job-count {
    font-size: 0.95rem;
    color: var(--text-white);
    margin-bottom: 25px;
    font-family: 'Courier New', monospace;
}
.crawler{
    padding: 10px 25px 10px 25px; 
    border-radius: 8px; 
    border-left: 5px solid var(--code-green);
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 20px;
    max-height: 300px;
    overflow: scroll;
}
.sector-label {
    font-size: 0.95em;
    color: var(--text-dull);
    letter-spacing: 2px;
    margin-top: 20px;
    border-left: 5px solid var(--other-color);    
    border-radius: 8px; 
    padding-left: 10px;
}

 /* -- Glow Cards -- */
.job-card {
    padding: 15px;
    margin: 12px 0;
    transition: all 0.3s ease 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.05);
    border: 2px solid var(--glass-border);
    border-right: 4px solid var(--code-green);
    background: var(--opaque);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.job-card:hover {
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);   
    transform: scale(1.03);
    background: var(--background-dull);
}

.job-card p {
    font-size: 0.99rem;
    color: var(--text-norm);
    line-height: 1.4;
    margin: 10px 0;
}
.job-card a {
    display: inline-block;
    color: var(--code-green);
    background-color: var(--background-dull);
    padding: 6px 12px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    border-radius: 3px;
    text-transform: uppercase;
    max-width: 100%;
}
.job-card a:hover {
    
}

/* "job-card" Active Scanner Effect */
.job-card::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to bottom, transparent, rgba(0, 255, 0, 0.05), transparent);
    transform: rotate(45deg);
    animation: scan 3s infinite linear;
}
@keyframes scan {
    from { transform: translateY(-100%) rotate(45deg); }
    to { transform: translateY(100%) rotate(45deg); }
}

.secure-link {
    text-decoration: none !important;
    font-style: normal !important;
    font-size: 0.85em !important;
    font-weight: bold !important;
    cursor: progress !important;
    color: var(--code-green) !important;
    font-family: 'Courier New', monospace !important;
}
.secure-link:hover { 
    text-decoration: none !important;
    font-style: normal !important;
    font-size: 0.85em !important;
    font-weight: bold !important;
    cursor: progress !important;
    color: var(--code-green) !important;
    font-family: 'Courier New', monospace !important;
 }

#activity-log {
    list-style: none;
    padding: 10px;
    background: var(--background-main);
    font-size: 0.75em;
    color: var(--code-green);
    opacity: 0.8;
    max-height: 150px;
    overflow: scroll;
    font-family: 'Courier New', monospace;
    margin-left: -10px;
}