/* --- General Setup & Variables (Same as Homepage) --- */
 :root {
     --color-dark: #292f35;
     --color-darker: #202428;
     --color-red: #1d3557;
     --color-grey: #e9ecef;
     --color-text-light: #ced4da;
     --color-text-dark: #333;
     --color-white: #fff;
     --font-heading: 'Open Sans', sans-serif;
     --font-body: 'Open Sans', sans-serif;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: var(--font-body);
     color: var(--color-text-dark);
     background-color: var(--color-white);
     font-size: 16px;
     line-height: 1.6;
 }

 .container {
     max-width: 1140px;
     margin: 0 auto;
     padding: 0 15px;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: var(--font-heading);
     font-weight: 700;
     color: var(--color-dark);
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 ul {
     list-style: none;
 }



 /* --- Page Header (Contact Page Specific) --- */
 .page-header {
     padding: 60px 0;
     background: url('images/pages/Contact-Us-Banner.png') no-repeat center center/cover;
     text-align: center;
     position: relative;
 }

 .page-header h1 {
     font-size: 48px;
     text-transform: uppercase;
     color: #333;
 }

 /* --- Contact Page Main Content --- */
 .contact-section {
     padding: 80px 0;
     background-color: #fff;
 }

 .contact-wrapper {
     display: flex;
     gap: 50px;
 }

 .contact-form-column {
     flex: 1.5;
 }

 .contact-info-column {
     flex: 1;
 }

 .contact-intro p {
     font-size: 15px;
     color: #555;
     margin-bottom: 30px;
     line-height: 1.7;
 }

 .contact-intro strong {
     color: #333;
 }

 .contact-intro .phone-number {
     color: var(--color-red);
     font-weight: bold;
 }

 .contact-form .form-group {
     margin-bottom: 20px;
 }

 .contact-form label {
     display: block;
     margin-bottom: 8px;
     color: #555;
     font-size: 15px;
 }

 .contact-form input,
 .contact-form textarea {
     width: 100%;
     padding: 12px;
     border: 1px solid #e5e5e5;
     background-color: #f7f7f7;
     font-family: var(--font-body);
     font-size: 15px;
     border-radius: 3px;
 }

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

 .contact-form .btn-submit {
     background-color: transparent;
     border: 1px solid var(--color-red);
     color: var(--color-red);
     padding: 14px 34px;
     cursor: pointer;
     font-family: var(--font-body);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     transition: background-color 0.35s ease, color 0.35s ease;
 }

.contact-form .btn-submit:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}

/* Alerts for form feedback */
.form-alert {
    display: none;
    margin: 0 0 16px 0;
    padding: 12px 16px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 14px;
}
.form-alert.show { display: block; }
.form-alert.success {
    background: #e6ffed;
    border-color: #2ecc71;
    color: #1f7a39;
}
.form-alert.error {
    background: #ffecec;
    border-color: #e74c3c;
    color: #8a1f17;
}

.info-box {
    margin-bottom: 40px;
}
 .info-box h3 {
     text-transform: uppercase;
     margin-bottom: 20px;
     padding-bottom: 10px;
     border-bottom: 1px solid #eee;
     display: inline-block;
 }

 .address-details p {
     color: #555;
     margin-bottom: 10px;
     line-height: 1.8;
 }

 .address-details strong {
     color: #333;
     font-weight: 700;
 }

 .address-details .email-link {
     color: var(--color-red);
 }

 .map-container img {
     width: 100%;
     display: block;
     border: 1px solid #eee;
 }

 /* =======================
    Responsive Adjustments
 ======================== */
 @media (max-width: 992px) {
     .page-header {
         padding: 50px 0;
     }

     .page-header h1 {
         font-size: 40px;
     }

     .contact-section {
         padding: 60px 0;
     }

     .contact-wrapper {
         gap: 30px;
     }
 }

 @media (max-width: 768px) {
     .page-header h1 {
         font-size: 32px;
     }

     .contact-wrapper {
         flex-direction: column;
     }

     .contact-form-column,
     .contact-info-column {
         flex: 1 1 100%;
     }

     .contact-form .btn-submit {
         width: 100%;
     }

     .contact-intro p {
         font-size: 14px;
     }
 }

 @media (max-width: 480px) {
     .page-header {
         padding: 40px 0;
     }

     .page-header h1 {
         font-size: 24px;
     }

     .contact-form input,
     .contact-form textarea {
         font-size: 16px;
     }
 }