.contact-container { 
    padding: 4rem 1.5rem; 
}
.page-title-section { 
    text-align: center; 
    margin-bottom: 3rem; 
}
.page-title-section h1 { 
    font-size: 3rem; 
    font-weight: 700; 
    color: var(--secondary-color); 
}
.page-title-section p { 
    font-size: 1.1rem; 
    color: #6c757d; 
    max-width: 600px; 
    margin: 0.5rem auto 0; 
}
.contact-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    background-color: var(--white-color);
    padding: 3rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.contact-info-cards h2, .contact-form-section h2 { 
    font-size: 1.8rem; 
    margin-bottom: 1.5rem; 
    padding-bottom: 0.75rem; 
    border-bottom: 2px solid var(--border-color); 
}
.contact-card { 
    display: flex; 
    align-items: flex-start; 
    gap: 1rem; 
    margin-bottom: 1.5rem; 
}
.contact-card .icon { 
    flex-shrink: 0; 
    color: var(--primary-color); 
    width: 40px; 
    height: 40px; 
    background-color: rgba(0, 123, 255, 0.1); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.contact-card .icon svg { 
    width: 20px; 
    height: 20px; 
    fill: currentColor; 
}
.contact-card .content h3 { 
    font-size: 1.1rem; 
    font-weight: 600; 
    margin-bottom: 0.25rem; 
}
.contact-card .content p { 
    margin: 0; 
    color: #555; 
    font-size: 0.95rem; 
}
.contact-card .content a { 
    color: var(--primary-color); 
    text-decoration: none; 
    font-weight: 500; 
}
.contact-card .content a:hover { 
    text-decoration: underline; 
}

.form-group { 
    margin-bottom: 1.25rem; 
}
.form-group label { 
    display: block; 
    margin-bottom: 0.5rem; 
    font-weight: 600; 
    font-size: 0.9rem; 
}
.form-group input, .form-group textarea { 
    width: 100%; 
    padding: 0.8rem 1rem; 
    border: 1px solid #ced4da; 
    border-radius: 8px; 
    font-size: 1rem; 
    transition: border-color 0.3s, box-shadow 0.3s; 
}
.form-group input:focus, .form-group textarea:focus { 
    border-color: var(--primary-color); 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15); 
}
.form-group textarea { 
    min-height: 140px; 
    resize: vertical; 
}
.submit-button { 
    display: inline-block; 
    background-color: var(--primary-color); 
    color: white; 
    padding: 0.8rem 2rem; 
    border: none; 
    border-radius: 8px; 
    font-size: 1.1rem; 
    font-weight: 600; 
    cursor: pointer; 
    transition: background-color 0.3s, transform 0.2s; 
}
.submit-button:hover { 
    background-color: #0056b3; 
    transform: translateY(-2px); 
}

.message-status { 
    padding: 1rem; 
    margin-bottom: 1.5rem; 
    border-radius: 8px; 
    font-weight: 500; 
    text-align: center; 
}
.message-status.success { 
    background-color: #d1e7dd; 
    color: #0f5132; 
    border: 1px solid #badbcc; 
}
.message-status.error { 
    background-color: #f8d7da; 
    color: #842029; 
    border: 1px solid #f5c2c7; 
}

@media (max-width: 992px) { 
    .contact-grid-wrapper { 
        grid-template-columns: 1fr; 
    } 
}
@media (max-width: 768px) {
    .contact-container { 
        padding: 2rem 1rem; 
    }
    .page-title-section h1 { 
        font-size: 2.2rem; 
    }
    .contact-grid-wrapper { 
        padding: 2rem; 
        gap: 2rem; 
    }
}

