/* ============================================================
   GLOBAL LAYOUT
   ============================================================ */
/* Main container for the Contact page layout */
.contact-layout {
    height: 100vh;                      /* Full viewport height */
    overflow-y: auto;                   /* allow vertical scroll*/
    padding: 1rem 2rem 4rem 2rem;       /* top, right, bottom, left */
}
/* Adjust layout padding for medium/small screens */
@media (max-width: 992px) {
    .contact-layout {
        padding: 1rem 2rem 4rem 2rem;
    }
}
/* ============================================================
   1. TITLE SECTION
   ============================================================ */
/* Title section container */
.contact-title-section {
    width: 100%;                        /* Take full width of the page */
    display: flex;                      /* Use flex for robust centering */
    justify-content: center;            /* Center horizontally */
    align-items: center;                /* Center vertically within the section */
    padding: 1.5rem 3.5rem 0.5rem 3.5rem;   /* Padding around the title */
    margin-bottom: 0;                   /* Space below the title section */
}
/* Contact title text*/
.contact-title {
    font-size: 4rem;                    /* Large text size for visibility */
    font-weight: 700;                   /* Bold text */
    color: #1E1E1E;                     /* Dark gray text color */
    margin: 0 auto 2rem auto;           /* Center horizontally and add bottom space */
    text-align: center;                 /* Center the title */
    display: block;                     /* Ensure full-width block behavior */
}
/* ============================================================
   2. CONTACT SECTION
   ============================================================ */
/* Container of all the contact section */
.contact-content-section {
    margin: 2rem auto 3rem auto;        /* Top and bottom spacing, center horizontally */
    padding: 0;          /* Inner spacing on all sides */

    display: flex;
    align-items: flex-start;            /* Better alignment for text blocks */
    gap: 3rem;                          /* Space between text and image */
}
/* LEFT SIDE — text block */
.contact-text {
    flex: 1 1 auto;
    min-width: 0;                       /* Prevent overflow issues */
    padding-left: 4rem;              /* === UPDATED === */
    padding-right: 0;
}
/* RIGHT SIDE — image wrapper */
.contact-image-wrapper {
    flex: 0 0 520px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-right: 4rem;

    border-radius: 0;
    overflow: visible;
}
/* Image styling */
.contact-image {
    width: 100%;
    height: auto;
    max-height: clamp(400px, 60vh, 800px);
    display: block;
    object-fit: contain;
    border-radius: 0;
}
/* Individual container of contact */
.contact-content-container {
    margin-bottom: 3rem;                /* Space between different contact blocks */
    margin-top: 0;
}
/* Contact name */
.contact-content-name {
    display: inline-block;
    font-weight: 600;                   /* Semi-bold to emphasize importance */
    color: #1E1E1E;                     /* Dark gray for strong readability */
    font-size: 2.2rem;                  /* Slightly large font for hierarchy */
    margin-bottom: 1rem;                /* Space below the name for separation */
    white-space: pre-line;              /* Interpret \n as line breaks */
}
/* Contact row container */
.contact-content-row {
    display: grid;
    grid-template-columns: 9rem 1fr;    /* 9rem for label, the rest for the other content */
    align-items: baseline;              /* vertical alignment of content in the same row */
    column-gap: 0.5rem;
    margin-bottom: 0.4rem;
}
/* Row title */
.contact-content-label {
    font-weight: 600;                   /* Bold to distinguish labels from content */
    color: #2B2B2B;                     /* Softer gray than pure black for balance */
    font-size: 1.5rem;                  /* Slightly smaller than name for hierarchy */
    margin: 0;
    padding: 0;
    line-height: 1.4;                   /* Line height/spacing for alignment between components on the same line */
}
/* Addres information */
.contact-content-address {
    color: #555;                        /* Medium gray for good readability and contrast */
    font-weight: 400;                   /* Normal weight to contrast with bold labels */
    font-size: 1.1rem;                  /* Matches label font size for consistency */
    line-height: 1.4;                   /* Line height/spacing for alignment between components on the same line */
    word-wrap: break-word;
    white-space: pre-line;              /* Interpret \n as line breaks */
    margin: 0;
    padding: 0;
}
/* email information */
.contact-content-email{
    color: #0056b3;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
    font-size: 1rem;                    /* Standard text size */
    margin: 0;
    padding: 0;
    line-height: 1.4;                   /* Line height/spacing for alignment between components on the same line */
}
/* email hover effect */
.contact-content-email:hover {
    color: #003d80;
}
/* ============================================================
   RESPONSIVE — LAYOUT SWITCH AT 1420px
   ============================================================ */
@media (max-width: 1420px) {
    .contact-content-section {
        margin: 2rem 0 3rem 0;
    }
}
/* ============================================================
   RESPONSIVE — LAYOUT SWITCH AT 1120px
   ============================================================ */

@media (max-width: 1100px) {
    .contact-content-section {
        flex-direction: column;
        gap: 2rem;
    }
    .contact-image-wrapper {
        order: -1;                         /* Image first */
        flex: none;
        width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
    }
    .contact-text {
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .contact-image {
        max-height: 60vh;
    }
}
/* ============================================================
   RESPONSIVE — Small Screens (up to 768px)
   ============================================================ */
@media (max-width: 768px) {
    .contact-title-section {
        padding: 1.5rem 0 0.5rem 0;     /* Padding*/
    }
    .contact-content-section {
        flex-direction: column;         /* Vertical layout */
        margin: 2rem 0 3rem 0;          /* Top and bottom spacing, center horizontally */
        padding: 1rem 0.5rem;           /* Inner spacing on all sides */
        gap: 2rem;
    }
}