.contact {
text-align: center;
padding: 60px 20px;
background: #f8f9fa;
}

.contact h2 {
   font-family: "Cherry Bomb One", system-ui;
    color: #22223b;
    text-align:center;
    font-size: 2.5rem;
    margin:40px;
}

.contact-container {
max-width: 500px;
margin: auto;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}

/* Form Inputs */
.contact form {
display: flex;
flex-direction: column;
gap: 15px;
}

.error-message {
font-family: "Roboto", sans-serif;
color: red;
font-size: 12px;
margin-top: 5px;
}

.contact label {
font-family: "Roboto", sans-serif;
font-weight: bold;
text-align: left;
display: block;
font-size: 14px;
color: #333;
}

.contact input,
.contact textarea {
 font-family: "Roboto", sans-serif;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
transition: all 0.3s ease;
}

/* Focus effect */
.contact input:focus,
.contact textarea:focus {
border-color: #15bb23;
outline: none;
box-shadow: 0 0 5px rgba(21, 187, 35, 0.5);
}

/* Read-only input styling */
#selected-plan {
font-family: "Roboto", sans-serif;
background-color: #f4f4f4;
font-weight: bold;
color: #333;
}

/* Textarea */
.contact textarea {
font-family: "Roboto", sans-serif;
height: 120px;
resize: vertical;
}

/* Submit Button */
.contact button {
font-family: "Sour Gummy", sans-serif;
background-color: #15bb23;
color: white;
padding: 12px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}

/* Button Hover Effect */
.contact button:hover {
background-color: #12a61e;
transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 600px) {
.contact-container {
    width: 90%;
    padding: 20px;
}
}