body {
            font-family: 'Saira Semi Condensed', sans-serif;
            background-color: #0d0d0d;
            color: #ffffff;
            overflow-x: hidden;
        }

        .gradient-line {
            height: 4px;
            background: linear-gradient(90deg, #ffc107 0%, #ff5722 100%);
            width: 100px;
            border-radius: 9999px;
            margin-top: 8px;
        }

        /* Custom scrollbar for a sleek look */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #1a1a1a;
        }

        ::-webkit-scrollbar-thumb {
            background: #4a4a4a;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #5a5a5a;
        }

        /* Animation for fade-in effect on elements */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .fade-in.show {
            opacity: 1;
            transform: translateY(0);
        }

        .scroll-to-top {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 50;
            display: none;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            border-radius: 50%;
            padding: 8px;
            background-color: rgba(255, 255, 255, 0.1);
        }

        .scroll-to-top.show {
            display: block;
        }

        /* Hero section specific styles for the background image and text alignment */
        #hero-section {
            background-image: url('https://g5mods.com/wp-content/uploads/2023/07/6446e1_bd18e1db64274cc7a9bc22696255a229mv2-1.jpg');
            background-size: cover;
            background-position: center;
            height: calc(100vh - 80px); 
            display: flex;
            align-items: center;
            position: relative;
            margin-top: 80px;
        }

        .hero-text-container {
            position: absolute;
            bottom: 8%; 
            left: 5%;
            width: 90%;
            max-width: 600px;
        }
        
        /* Dropdown menu styling */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #1a1a1a;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            padding: 8px;
            border-radius: 8px;
            transition: opacity 0.3s ease-in-out;
            opacity: 0;
        }

        .dropdown:hover .dropdown-content {
            display: block;
            opacity: 1;
        }
        
        .dropdown-content a {
            color: white;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            border-radius: 4px;
        }

        .dropdown-content a:hover {
            background-color: #2a2a2a;
        }

        /* Particles canvas styling */
        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 0;
        }
        
        .footer-logo:hover {
            transform: scale(1.1);
            transition: transform 0.3s ease-in-out;
        }

        /* Typewriter effect styles */
        #typewriter-text {
            border-right: 2px solid;
            white-space: nowrap;
            overflow: hidden;
            animation: blink-caret 0.75s step-end infinite;
        }

        /* The typewriter cursor animation */
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: white }
        }