/* Ensure inputs merge with the dark theme */
.custom-input {
    background-color: var(--color5) !important;
    color: var(--color2) !important;
    border: 1px solid var(--color4) !important;
    transition: all 0.3s ease;
}

    /* Remove default browser focus outline and use theme colors */
    .custom-input:focus {
        background-color: rgba(var(--color-5-rgb), 0.9) !important;
        border-color: var(--color1) !important;
        box-shadow: 0 0 0 0.2rem rgba(158, 97, 85, 0.25); /* Based on color1 */
        color: var(--color2) !important;
    }

    /* Placeholder styling using theme variables */
    .custom-input::placeholder {
        color: var(--color4) !important;
        opacity: 0.7;
    }

/* Select dropdown fix for dark mode */
select.custom-input option {
    background-color: var(--color5);
    color: var(--color2);
}

/* Hover effects for the info box */
.contact-info-box:hover {
    border-color: var(--color1) !important;
}

@media (min-width: 992px) {
    .custom-md-height {
        height: 34rem !important;
    }
}