/* =========================================
   CONTACT PAGE STYLES (contact.css)
   ========================================= */

/* --- PAGE HEADER BANNER --- */
.page-header { 
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/bg.jpg') center/cover no-repeat; 
    text-align: center; 
    color: var(--white); 
    padding: 120px 20px; 
}
.page-header h1 { font-size: 3.5rem; text-shadow: 2px 2px 10px rgba(0,0,0,0.3); margin-bottom: 15px; }
.page-header p { font-size: 1.1rem; max-width: 600px; margin: 0 auto; opacity: 0.9; }

/* --- CONTACT SECTION --- */
.contact-section { padding: 80px 5%; background-color: var(--bg-color); }
.contact-grid { display: flex; flex-direction: column; gap: 40px; max-width: 1200px; margin: 0 auto; overflow: hidden; }

/* Info Box */
.contact-info { background: var(--white); padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); width: 100%; box-sizing: border-box; border-top: 5px solid var(--primary); }
.contact-info h3 { font-size: 28px; margin-bottom: 15px; color: var(--text-dark); }
.contact-info p.desc { color: var(--text-light); margin-bottom: 40px; }

.info-item { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 25px; }
.info-item .icon { width: 45px; height: 45px; background: #fdf0f2; color: var(--primary); display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 18px; flex-shrink: 0; }
.info-item .details h4 { margin: 0 0 5px 0; color: var(--text-dark); font-size: 15px; }
.info-item .details p { margin: 0; color: #6c7a89; font-size: 14px; }

.social-links { margin-top: 30px; display: flex; gap: 15px; }
.social-links a { width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; color: var(--text-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: 0.3s; }
.social-links a:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-3px); }

/* Form Box */
.contact-form-box { background: var(--white); padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); width: 100%; box-sizing: border-box; }
.contact-form-box h3 { font-size: 28px; margin-bottom: 30px; color: var(--text-dark); }

.form-grid { display: flex; flex-direction: column; gap: 15px; margin-bottom: 15px; }
.form-group { width: 100%; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; color: var(--text-dark); }
.form-group input, .form-group textarea { width: 100%; padding: 15px; border: 1px solid #eaeaea; border-radius: 8px; font-size: 15px; background: #fafafa; box-sizing: border-box; font-family: 'Poppins', sans-serif; transition: 0.3s; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); background: var(--white); box-shadow: 0 0 0 3px rgba(183, 110, 121, 0.1); }
.form-group textarea { resize: vertical; height: 120px; }

.submit-btn { width: 100%; padding: 16px; background: var(--text-dark); color: var(--white); border: none; border-radius: 8px; font-weight: 600; font-size: 16px; cursor: pointer; transition: 0.3s; text-transform: uppercase; }
.submit-btn:hover { background: var(--primary); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(183,110,121,0.2); }
.submit-btn:disabled { background: #999; cursor: not-allowed; transform: none; box-shadow: none; }

/* --- DESKTOP VIEW --- */
@media (min-width: 992px) {
    .contact-grid { flex-direction: row; }
    .contact-info { flex: 1; }
    .contact-form-box { flex: 1.5; }
    .form-grid { flex-direction: row; }
    .form-grid .form-group { flex: 1; }
}

/* --- MOBILE VIEW --- */
@media (max-width: 768px) {
    .page-header { padding: 80px 20px; }
    .page-header h1 { font-size: 2.2rem; }
    .contact-section { padding: 40px 15px; } 
    .contact-info, .contact-form-box { padding: 30px 20px; } 
    .contact-info h3, .contact-form-box h3 { font-size: 24px; margin-bottom: 15px; }
    .contact-info p.desc { font-size: 14px; margin-bottom: 25px; }
    .info-item { margin-bottom: 20px; gap: 15px; }
    .info-item .icon { width: 40px; height: 40px; font-size: 16px; }
    .info-item .details h4 { font-size: 15px; }
    .info-item .details p { font-size: 14px; }
    .submit-btn { padding: 14px; font-size: 15px; }
}