/* ================= CONTACT PAGE ================= */
 .contact-page {
     max-width: 1200px;
     margin: auto;
     padding: 1.2rem;
 }

 /* Header */
 .contact-header {

     margin-block: 2rem;
 }

 .contact-header h1 {
     font-size: 1.9rem;
     font-weight: 800;
     color: #333333;
 }

 .contact-header p {
     font-size: 0.85rem;
     color: #6b7280;
     max-width: 600px;

 }

 /* Layout */
 .contact-grid {
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: 1.2rem;
 }

 @media (max-width: 900px) {
     .contact-grid {
         grid-template-columns: 1fr;
     }
 }

 /* Form Card */
 .contact-card {
     background: #fff;
     border-radius: 1.2rem;
     padding: 1.2rem;
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
 }

 .contact-card h2 {
     font-size: 1.1rem;
     margin-bottom: 1rem;
 }

 /* Inputs */
 .contact-form input,
 .contact-form textarea {
     width: 100%;
     padding: 0.7rem 0.8rem;
     border-radius: 0.8rem;
     border: 1px solid #e5e7eb;
     font-size: 0.8rem;
     margin-bottom: 0.7rem;
 }

 .contact-form textarea {
     min-height: 120px;
     resize: vertical;
 }

 /* Button */
 .contact-form button {
     background: linear-gradient(135deg, var(--brand-color), #3b82f6);
     border: none;
     color: #fff;
     padding: 0.7rem 1.4rem;
     border-radius: 0.8rem;
     font-size: 0.8rem;
     cursor: pointer;
 }

 /* Info Box */
 .contact-info {
     background: linear-gradient(180deg, #f9fafb, #f3f4f6);
     border-radius: 1.2rem;
     padding: 1.2rem;
     display: flex;
     flex-direction: column;
     gap: 0.9rem;
 }

 .contact-info-item {
     display: flex;
     gap: 0.7rem;
     align-items: center;
 }

 .contact-info-icon {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: var(--brand-color);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.1rem;
 }

 .contact-info-text strong {
     display: block;
     font-size: 0.8rem;
 }

 .contact-info-text span {
     font-size: 0.75rem;
     color: #374151;
 }

 /* Map */
 .contact-map {
     margin-top: 1.5rem;
     border-radius: 1.2rem;
     overflow: hidden;
     height: 280px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }

 /* Breadcrumb */
 .breadcrumb {
     font-size: 13px;
     margin-bottom: 24px;
     color: #666;
 }

 .breadcrumb a {
     color: var(--brand-color);
     text-decoration: none;
 }

 .breadcrumb span {
     margin: 0 6px;
 }