/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
    background-color: var(--light-color);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    padding: 24px 0 30px 0;
}

    .contact .info-item i {
        font-size: 20px;
        color: var(--accent-color);
        width: 56px;
        height: 56px;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        transition: all 0.3s ease-in-out;
        border-radius: 50%;
        border: 2px dotted color-mix(in srgb, var(--accent-color), transparent 40%);
    }

    .contact .info-item h3 {
        font-size: 20px;
        color: color-mix(in srgb, var(--default-color), transparent 20%);
        font-size: 18px;
        font-weight: 700;
        margin: 10px 0;
    }

    .contact .info-item p {
        margin-bottom: 0;
        font-size: 14px;
    }

.contact .contact-form {
    background-color: var(--light-color);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    height: 100%;
    padding: 30px;
}

@media (max-width: 575px) {
    .contact .contact-form {
        padding: 20px;
    }
}

.contact .contact-form input[type=text],
.contact .contact-form input[type=email],
.contact .contact-form textarea {
    font-size: 14px;
    padding: 10px 15px;
    box-shadow: none;
    border-radius: 0;
    color: var(--default-color) !important;
    background-color: var(--light-color) !important;
    border-color: color-mix(in srgb, var(--default-color), transparent 80%) !important;
}

.contact .contact-form .form-control:focus {
    background-color: var(--light-color);
    border-color: var(--accent-color) !important;
    box-shadow: none !important;
    color: var(--default-color) !important;
}

.contact .contact-form input:-webkit-autofill {
    background-color: var(--light-color) !important;
    -webkit-text-fill-color: var(--default-color) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.contact .contact-form input[type=text]::placeholder,
.contact .contact-form input[type=email]::placeholder,
.contact .contact-form textarea::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 70%);
}