:root {
    --primary-color: #6bb543; /* Your primary color */
    --secondary-color: #3764a1; /* Your secondary color */
    --white: #ffffff;
    --black: #070707;
    --border-color: #d1d1d1; /* Default border color */
}

        .feedback-section {
            position: relative;
            padding: 50px 20px;
            overflow: hidden;
        }

        .feedback-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url(../../feedback/doodle.png) no-repeat center center;
            background-size: cover;
            filter: blur(3px); /* Adjust blur level here */
            z-index: -1; /* Ensure background is below content */
        }


        .feedback-form {
    max-width: 500px;
    margin: 0 auto;
    background-color: var(--white);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgb(0 0 0 / 36%);
    transition: transform 0.3s;
}


        .feedback-section h2 {
            text-align: center;
            margin-bottom: 20px;
            color: var(--black);
        }

        .feedback-section input[type="text"],
        .feedback-section input[type="email"],
        .feedback-section textarea {
             width: 95%;
    padding: 12px;
    margin-bottom: 15px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
}

        .feedback-section input[type="text"]:focus,
        .feedback-section input[type="email"]:focus,
        .feedback-section textarea:focus {
            border-color: var(--primary-color);
            outline: none;
        }

.feedback-section .rating {
    display: flex;
    justify-content: space-between;
    margin: 5px;
    border: 1px dotted grey;
    padding: 3px;
    border-radius: 13px;
}

        .feedback-section .rating input {
            display: none;
        }

        .feedback-section .rating label {
            font-size: 40px;
            cursor: pointer;
            transition: transform 0.3s;
            margin: 0 10px;
        }

        .feedback-section .rating label:hover {
            transform: scale(1.2);
        }

        .feedback-section .rating input:checked + label {
            transform: scale(1.2);
        }

        .feedback-section button {
            width: 100%;
            padding: 12px;
            background-color: var(--primary-color);
            color: var(--white);
            border: none;
            border-radius: 8px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .feedback-section button:hover {
            background-color: var(--secondary-color);
            color: var(--black);
        }

        @media (max-width: 768px) {
            .feedback-form {
                padding: 20px;
            }
        }