/* Contact - Form */

/* Main container for the contact form */
.contact-form {
    margin-top: 20px; /* Add spacing from the top */
    padding: 20px; /* Add internal spacing */
    padding-top: 5px; /* Adjust top padding */
    border: 1px solid #ddd; /* Light border for form */
    border-radius: 8px; /* Rounded corners */
    background-color: #f9f9f9; /* Light background color */
    display: flex; /* Enable flexbox layout */
    flex-direction: column; /* Arrange items vertically */
    gap: 15px; /* Space between elements */
    overflow: hidden; /* Prevent content overflow */
    box-sizing: border-box; /* Include padding/border in dimensions */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}

/* Inner form container for user inputs */
.user-form {
    display: flex; /* Enable flexbox layout */
    flex-direction: column; /* Arrange items vertically */
    gap: 15px; /* Space between elements */
    width: 100%; /* Full width of the container */
    box-sizing: border-box; /* Include padding/border in dimensions */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Add shadow effect */
}

/* Section for contact information */
.contact-info {
    display: flex; /* Enable flexbox layout */
    flex-direction: column; /* Arrange items vertically */
    gap: 15px; /* Space between items */
    margin-bottom: 20px; /* Add spacing below */
}

/* Individual contact item (icon + text/link) */
.contact-item {
    display: flex; /* Enable flexbox layout */
    align-items: center; /* Align items vertically */
    gap: 10px; /* Space between icon and text */
    font-size: 1rem; /* Set font size */
    color: #333; /* Text color */
}

/* Style for contact item icons */
.contact-item i {
    font-size: 1.5rem; /* Larger icon size */
    color: #d1bc8a; /* Icon color */
}

/* Style for contact links */
.contact-item a {
    text-decoration: none; /* Remove underline */
    color: #333; /* Default text color */
    font-weight: bold; /* Bold text */
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Hover effect for contact links */
.contact-item a:hover {
    color: #d1bc8a; /* Change color on hover */
}

/* Input fields styling */
.styled-input {
    padding: 10px; /* Add internal spacing */
    border: 1px solid #ccc; /* Light border */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Set font size */
    background-color: #f9f9f9; /* Light background */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth effects */
    width: 100%; /* Full width of the container */
    box-sizing: border-box; /* Include padding/border in dimensions */
}

/* Button styling */
.styled-button {
    padding: 12px 20px; /* Internal spacing */
    font-size: 16px; /* Font size */
    font-weight: bold; /* Bold text */
    color: white; /* Button text color */
    background-color: #d1bc8a; /* Background color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth effects */
    text-align: center; /* Center text */
    width: fit-content; /* Button width adjusts to text */
    align-self: flex-end; /* Align button to the right */
}

/* Responsive styles for screens smaller than 768px */
@media screen and (max-width: 768px) {
    .contact-container {
        padding: 15px; /* Reduce padding */
        max-width: 90%; /* Adjust max width */
    }

    .contact-form {
        padding: 15px; /* Reduce padding */
    }

    .user-form {
        width: 100%; /* Full width */
    }

    .styled-input {
        font-size: 14px; /* Smaller font size */
        padding: 8px; /* Reduce padding */
    }

    .styled-button {
        font-size: 14px; /* Smaller font size */
        padding: 10px 15px; /* Adjust padding */
    }
}

/* Responsive styles for screens smaller than 480px */
@media screen and (max-width: 480px) {
    .contact-container {
        padding: 10px; /* Further reduce padding */
    }

    .contact-form {
        padding: 10px; /* Further reduce padding */
    }

    .user-form {
        width: 100%; /* Full width */
    }

    .styled-input {
        font-size: 13px; /* Smaller font size */
        padding: 8px; /* Reduce padding */
    }

    .styled-button {
        font-size: 13px; /* Smaller font size */
        padding: 8px 12px; /* Adjust padding */
        align-self: center; /* Center button */
    }
}