/* Futuristic Form Styling */
.futuristic-form {
    font-family: 'Orbitron', sans-serif; /* Digital-style font */
    color: #0f0; /* Green text for matrix effect */
}

/* Styling for Form Groups */
.form-group {
    margin-bottom: 15px;
}

/* Label Styling */
.form-label {
    display: block;
    margin-bottom: 5px;
}

/* Input Field Styling */
.form-input {
    width: 100%;
    padding: 10px;
    background: #000;
    border: 1px solid #0f0;
    color: #0f0;
    font-size: 16px;
}

.form-input:focus {
    outline: none;
    box-shadow: 0 0 10px #0f0; /* Neon glow effect */
}

/* Submit Button Styling with Animation */
.submit-btn {
    background: linear-gradient(270deg, #09f, #f09);
    background-size: 400% 400%;
    animation: GradientAnimation 8s ease infinite;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    transition: transform 0.2s;
}

.submit-btn:hover {
    transform: scale(1.1);
}

.submit-btn:active {
    transform: scale(0.9);
}

@keyframes GradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
            0 0 7px #ffda44,
            0 0 10px #ffda44,
            0 0 21px #ffda44,
            0 0 42px #cda434,
            0 0 82px #cda434,
            0 0 92px #cda434,
            0 0 102px #cda434,
            0 0 151px #cda434;
        color: #ffda44;
    }
    20%, 24%, 55% {
        text-shadow: none;
        color: #333; /* Dimmed colour */
    }
}

.neon-title {
    font-size: 2rem; /* Adjust size as needed */
    color: #ffda44; /* Gold color */
    text-align: center;
    animation: flicker 1.5s infinite alternate; /* Adjust timing as desired */
}

.customer-reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates three columns */
    grid-gap: 20px; /* Space between the columns and rows */
    padding: 20px; /* Padding around the entire grid */
}

.review {
    background: #f9f9f9; /* Light background for the review */
    padding: 15px; /* Padding inside each review box */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Modern box shadow */
    border-radius: 5px; /* Rounded corners for the boxes */
    margin-bottom: 20px; /* Space below each review */
}

.gold-stars {
    background-color: #0bb77d;   /* Green background */
    color: white;                /* White color for the stars */
    padding: 2px;                /* Padding to create space around the stars */
    border-radius: 0px;          /* Rounded corners of the background */
    box-shadow: 0 0 2px #ffd700, /* Gold glow effect */
                0 0 2px #ffd700, 
                0 0 2px #ffd700;
    margin-right: 5px;           /* Space after the stars */
}


/* Mobile view */
@media (max-width: 768px) {
    .customer-reviews {
        grid-template-columns: 1fr; /* Creates a single column for mobile */
    }
}

.review {
    background: #f9f9f9; /* Light background for the review */
    padding: 15px; /* Padding inside each review box */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Modern box shadow */
    border-radius: 5px; /* Rounded corners for the boxes */
    margin-bottom: 20px; /* Space below each review */
}

.gold-stars {
    background-color: #0bb77d;   /* Green background */
    color: white;                /* White color for the stars */
    padding: 2px;                /* Padding to create space around the stars */
    border-radius: 0px;          /* Rounded corners of the background */
    box-shadow: 0 0 2px #ffd700, /* Gold glow effect */
                0 0 2px #ffd700, 
                0 0 2px #ffd700;
    margin-right: 5px;           /* Space after the stars */
}
