/* --- Contact Page Specific Styles --- */

/* General page layout & background */
body.contact-page { /* Add this class to your body tag in contact.html */
    background-color: #f8f9fa; /* Lighter, subtle background */
    color: #333;
}

/* Page Header (Get in Touch title) */
.page-header {
    /* Using a different gradient */
    background: linear-gradient(135deg, #17a2b8, #6610f2);
    color: #fff;
    padding: 60px 0;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 25px; /* Reduced space below header */
}
.logo-img {
    height: 50px;        /* Adjust the height to fit your navbar */
    width: auto;         /* Maintains aspect ratio */
    display: block;
}
.end-logo {
    height: 30px;        /* Slightly smaller than your main logo usually looks best */
    width: auto;
    margin-left: 10px;   /* Adds a little extra breathing room from the icons */
}
.logo {
    display: flex;
    align-items: center; /* Vertically centers the text with the image */
    gap: 10px;           /* Adds space between the image and the text */
    text-decoration: none;
    font-weight: bold;
    color: white;        /* Adjust based on your design */
}
.page-header h1 {
    font-size: 3rem;
    font-weight: 900;
    margin: 0;
    letter-spacing: 1.5px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

/* Style for the intro paragraph */
.page-intro {
    font-size: 1.25rem;
    color: #555;
    text-align: center;
    max-width: 750px;
    margin: 10px auto 35px auto; /* Reduced bottom margin */
    line-height: 1.7;
}

/* --- Contact Layout Adjustments (Form styles are mostly in style.css) --- */
.contact-layout {
    /* Existing grid styles are in style.css */
    padding-top: 15px; /* Add a little space above the form/info */
    margin-top: 0; /* Override default margin-top from style.css */
    /* Ensure it inherits display: grid; gap: 40px; from style.css */
    max-width: 900px; /* Limit width for better form readability */
    margin-left: auto;
    margin-right: auto; /* Center the layout */
}

/* Slight adjustments to the form and info boxes */
.contact-form, .contact-info {
    background-color: #fff; /* Ensure white background */
    padding: 30px; /* Increase padding */
    border-radius: 12px; /* More rounded corners */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Match card shadow */
}

.contact-info {
    background-color: #e9ecef; /* Slightly different background for info */
}

.contact-info h3 {
    text-align: left; /* Align heading left */
    margin-bottom: 20px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    display: inline-block;
}

.contact-info p {
    margin-bottom: 15px;
    line-height: 1.6;
}

.contact-info strong {
    color: var(--dark-color);
}

/* Adjust button style slightly if needed */
.contact-form button {
    margin-top: 10px; /* Add slight space above button */
}

/* --- NOTE: Most .contact-form styles remain unchanged in style.css --- */