﻿body {
    /*background: -webkit-linear-gradient(left, #0072ff, #00c6ff);*/
    background-color: white;
}

.contact-form {
    box-shadow: 3px 1px 17px -1px rgba(250, 180, 28, 0.445);
    -webkit-box-shadow: 3px 1px 17px -1px rgba(250, 180, 28, 0.616);
    -moz-box-shadow: 3px 1px 17px -1px rgba(250,181,28);
    background: #fff;
    margin-top: 5%;
    margin-bottom: 5%;
    width: 70%;
    max-width: 600px; /* Add max-width for responsiveness */
    margin: 3% auto; /* Center the form */
    padding: 20px; /* Add some padding for better spacing on small screens */
    border-radius: 17px;
}

    /*.contact-form .form-control {
        border-radius: 1rem;
        margin-bottom: 10px;*/ /* Add some space between form elements */
    /*}*/

.contact-image {
    text-align: center;
}

    .contact-image img {
        width: 40%; /* Increase the image size for better visibility on small screens */
        max-width: 110px; /* Set a maximum width for the image */
        margin-top: -10%;
    }

.contact-form form {
    padding: 0;
}

    .contact-form form .row {
        margin-bottom: 10px; /* Add space between rows */
    }

.contact-form h3 {
    text-align: center;
    color: #0062cc;
}

.contact-form .btnContact, .btnContactSubmit {
    width: 100%; /* Make the buttons full width on small screens */
    border: none;
    border-radius: 1rem;
    padding: 1.5%;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

/* Add a media query for small screens (up to 768px) */
@media (max-width: 768px) {
    body {
        height: 100%;
    }

    .contact-form {
        width: 90%; /* Reduce the form width for small screens */
    }

    .contact-image img {
        width: 50%; /* Further increase image size for very small screens */
        max-width: 100px;
    }
}

.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #FFA500;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}