/* Custom styles for professional aesthetics */
        :root {
            --primary-color: #10b981; /* Emerald-500 */
            --bg-dark: #0a0a0a;
            --text-light: #f3f4f6;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-light);
            scroll-behavior: smooth;
        }

    
        html { scroll-behavior: smooth; }
        /* Smooth Accordion Transition Class */
        .accordion-content {
            transition: grid-template-rows 0.5s ease-out;
        }


        /* Custom scrollbar for a sleek look */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 4px;
        }

        .section-title {
            color: var(--primary-color);
            position: relative;
            display: inline-block;
            margin-bottom: 2rem;
            font-weight: 800;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 70%;
            height: 4px;
            background-color: var(--primary-color);
            border-radius: 2px;
        }

        /* Styling for the sticky header */
        #header.scrolled {
            background-color: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }
        
        /* Utility for icon styling */
        .icon {
            font-size: 1.5rem;
            color: var(--primary-color);
        }

        /* Dynamic Active Link Styling */
        .nav-link.active-link {
            color: var(--primary-color); /* Bright green */
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 4px; /* Ensure space for the border */
        }
        
        .star-rating {
            color: gold;
        }


        @keyframes shake {
        0%, 100% { transform: translateX(0); }
        20%, 60% { transform: translateX(-8px); }
        40%, 80% { transform: translateX(8px); }
        }

        .animate-shake {
        animation: shake 0.4s;
        }



        /* Custom styles to ensure typing cursor is visible */
        .cursor {
            display: inline-block;
            width: 3px;
            background-color: #22c55e;
            animation: cursor .75s step-end infinite;
            margin-left: 4px;
            vertical-align: middle;
            height: 1em;
        }
        
        /* Prevent layout shift on typing */
        .typing-container {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
        }


        /* EMAIL SENDER */