/* Custom Form Icon Styling */



.form-group {

    position: relative;

    margin-bottom: 20px;

}



.input-icon {

    position: relative;

}



.input-icon i {

    position: absolute;

    left: 12px;

    top: 50%;

    transform: translateY(-50%);

    color: #777;

    font-size: 16px;

    z-index: 2;

}



.form-group input,

.form-group select {

    width: 100%;

    padding: 10px 15px 10px 35px;

    border: 1px solid #e74c3c;

    border-radius: 4px;

    height: 45px;

    font-size: 16px;

    box-sizing: border-box;

}



/* Adjust icon position for specific form elements */

.form-group select + i {

    right: 15px;

    left: auto;

}



/* Border color for different states */

.form-group input:focus,

.form-group select:focus {

    border-color: #3498db;

    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);

    outline: none;

}



.form-group input.error,

.form-group select.error {

    border-color: #e74c3c;

}



/* Fix for select elements to ensure icon doesn't get covered by dropdown arrow */

.form-group select {

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23777' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: calc(100% - 12px) center;

    padding-right: 35px;

}