﻿
/*--------------------------------------------------------------
# Contact Us
--------------------------------------------------------------*/
.contact .contact-info {
    margin-bottom: 20px;
    text-align: center;
}

    .contact .contact-info i {
        font-size: 48px;
        display: inline-block;
        margin-bottom: 10px;
        color: #4f92af;
    }

    .contact .contact-info address,
    .contact .contact-info p {
        margin-bottom: 0;
        color: #444;
    }

    .contact .contact-info h3 {
        font-size: 18px;
        margin-bottom: 15px;
        font-weight: 300;
        color: #999;
    }

    .contact .contact-info a {
        color: #000;
    }

        .contact .contact-info a:hover {
            color: #4f92af;
        }

.contact .contact-address,
.contact .contact-phone,
.contact .contact-email {
    margin-bottom: 20px;
}

.contact .email-form .error-message {
    display: none;
    color: #444;
    background: #ed3c0d;
    text-align: center;
    padding: 15px;
    font-weight: 600;
}

    .contact .email-form .error-message br + br {
        margin-top: 25px;
    }

.contact .email-form .sent-message {
    display: none;
    color: #444;
    background: #18d26e;
    text-align: center;
    padding: 15px;
    font-weight: 600;
}

.contact .email-form .loading {
    display: none;
    background: #444;
    text-align: center;
    padding: 15px;
}

    .contact .email-form .loading:before {
        content: "";
        display: inline-block;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        margin: 0 10px -6px 0;
        border: 3px solid #18d26e;
        border-top-color: #444;
        animation: animate-loading 1s linear infinite;
    }

.contact .email-form input,
.contact .email-form textarea {
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
}

    .contact .email-form input:focus,
    .contact .email-form textarea:focus {
        border-color: #4f92af;
    }

.contact .email-form .submitButton {
    background: #4f92af;
    border: 0;
    padding: 10px 24px;
    color: #fff;
    transition: 0.4s;
}

    .contact .email-form .submitButton:hover {
        background: #72a8bf;
    }

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (min-width: 768px) {
    .contact .contact-phone {
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }

    .contact .contact-address,
    .contact .contact-phone,
    .contact .contact-email {
        padding: 20px 0;
    }
}

/* Success Message Style */
.sent-message {
    background-color: #4CAF50; /* green background */
    color: white; /* white text */
    padding: 10px 20px; /* vertical and horizontal padding */
    border-radius: 5px; /* rounded corners */
    margin-top: 20px; /* some space above the message */
    display: inline-block;
    font-weight: bold; /* bold font */
    position: relative; /* to position the icon */
}

    .sent-message:before {
        content: "\2714"; /* checkmark icon */
        position: absolute; /* absolute positioning */
        left: 10px; /* space from the left */
        top: 50%; /* vertically centered */
        transform: translateY(-50%); /* vertically centered */
        margin-right: 5px; /* space between the icon and text */
    }

/* Error Message Style */
.error-message {
    background-color: #f44336; /* red background */
    color: white; /* white text */
    padding: 10px 20px; /* vertical and horizontal padding */
    border-radius: 5px; /* rounded corners */
    margin-top: 20px; /* some space above the message */
    display: inline-block;
    font-weight: bold; /* bold font */
    position: relative; /* to position the icon */
}

    .error-message:before {
        content: "\26A0"; /* warning/exclamation icon */
        position: absolute; /* absolute positioning */
        left: 10px; /* space from the left */
        top: 50%; /* vertically centered */
        transform: translateY(-50%); /* vertically centered */
        margin-right: 5px; /* space between the icon and text */
    }
