/* General container styling to match the theme */
.contact-container {
    background-color: rgba(18, 18, 22, 0.8); /* Semi-transparent dark background */
    border-radius: 8px;
    border: 1px solid #333;
    backdrop-filter: blur(5px); /* Optional: blur effect for modern look */
}

/* Style for form labels */
.form-label {
    color: #a9a9a9; /* Light grey for labels */
    font-weight: 500;
}

/* Styling for form inputs, textareas, and selects */
.form-control,
.form-select {
    background-color: #1a1a1f; /* Dark background for inputs */
    color: #e0e0e0; /* Light text color */
    border: 1px solid #444;
    border-radius: 5px;
}

.form-control:focus,
.form-select:focus {
    background-color: #222228;
    color: #fff;
    border-color: #8A2BE2; /* Purple border on focus, matching logo */
    box-shadow: 0 0 0 0.2rem rgba(138, 43, 226, 0.25);
}

/* Remove the default white background on autofill for dark theme */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1a1a1f inset !important;
    -webkit-text-fill-color: #e0e0e0 !important;
}


/* Dropdown arrow color for select */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a9a9a9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Custom button style to match the 'Notify Me' button */
.btn-notify {
    background-color: transparent;
    color: #f0f0f0;
    border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, #8A2BE2, #FF69B4); /* Gradient border */
    padding: 10px 20px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-notify:hover {
    background: linear-gradient(to right, #8A2BE2, #FF69B4);
    color: #fff;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
}