feedback.css

.space-bg {
            background: linear-gradient(135deg, #0a0f1f 0%, #1a1f3f 50%, #0a0f1f 100%);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .glassmorphism {
            background: rgba(13, 17, 38, 0.85);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        /* Select Styling */
        select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236366f1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            background-size: 1.5em;
            padding-right: 2.5rem;
        }

        select:focus {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234f46e5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
        }

        /*  Dropdown Animation */
        .custom-select {
            position: relative;
            transition: all 0.3s ease;
        }

        .custom-select::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 0.5rem;
            background: linear-gradient(45deg, #4f46e5, #6366f1);
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }

        .custom-select:hover::after {
            opacity: 0.5;
        }

        /* Star Rating */
        .star-rating input[type="radio"] {
            display: none;
        }

        .star-rating label {
            cursor: pointer;
            color: #4b5563;
            transition: all 0.3s ease;
        }

        .star-rating:hover label {
            color: #6366f1;
            text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
        }

        .star-rating input[type="radio"]:checked ~ label {
            color: #6366f1;
            text-shadow: 0 0 15px rgba(99, 102, 241, 0.7);
        }

        /* Input and Textarea Styling */
        .form-input {
            background: rgba(17, 24, 39, 0.8);
            border: 1px solid rgba(99, 102, 241, 0.2);
            transition: all 0.3s ease;
        }

        .form-input:focus {
            border-color: #6366f1;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
            background: rgba(17, 24, 39, 0.9);
        }

        /* Submit Button Animation */
        .submit-btn {
            background: linear-gradient(45deg, #4f46e5, #6366f1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .submit-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.5s ease;
        }

        .submit-btn:hover::before {
            left: 100%;
        }

        /* Success Message Animation */
        @keyframes slideIn {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .success-message {
            animation: slideIn 0.4s ease forwards;
        }