.contact-wrapper {
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 50vh; /* Full height of the viewport */
    background-color: #f4f4f4; /* Light gray background */
}

/* Contact Container */
.contact-container {
    background: #ffffff; /* White background */
    padding: 20px; /* Padding around the content */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: 90%; /* Responsive width */
    max-width: 400px; /* Maximum width */
    text-align: center; /* Center-align text */
}

.contact-container h1 {
    font-size: 2em; /* Responsive heading size */
    margin-bottom: 20px; /* Spacing below the heading */
}

/* Contact Info */
.contact-info p {
    margin: 10px 0; /* Spacing between paragraphs */
    color: #555; /* Slightly lighter text color */
    font-size: 1em; /* Base font size */
}

/* Link Styles */
.contact-info a {
    color: #007bff; /* Link color */
    text-decoration: none; /* Remove underline */
}

.contact-info a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Hover Effect for strong elements */
.contact-info p strong:hover {
    color: #007bff; /* Change color on hover */
    cursor: pointer; /* Change cursor to pointer */
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .contact-container {
        padding: 15px; /* Reduced padding for smaller screens */
    }

    .contact-container h1 {
        font-size: 1.5em; /* Smaller heading on mobile */
    }

    .contact-info p {
        font-size: 0.9em; /* Smaller paragraph text */
        margin: 5px 0; /* Less spacing between paragraphs */
    }
}