/* ── Hero ───────────────────────────────────────────────────────── */

.about-hero {
    width           : 100%;
    height          : 280px;
    background      : url('/images/metrorest_about_main.jpg') center/cover no-repeat;
    position        : relative;
}

.about-hero-overlay {
    position        : absolute;
    inset           : 0;
    background      : rgba(0, 0, 0, 0.45);
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    color           : white;
    text-align      : center;
}

.about-hero-overlay h1 {
    font-size       : 2.8rem;
    font-weight     : 600;
    margin          : 0;
}

.about-breadcrumb {
    font-size       : 0.85rem;
    opacity         : 0.8;
    margin-top      : 0.5rem;
}

/* ── About Section ──────────────────────────────────────────────── */

.about-us-section {
    background      : #faf6ef;
    padding         : 5rem 2rem;
}

.about-container {
    max-width       : 1000px;
    margin          : 0 auto;
    display         : flex;
    gap             : 4rem;
    align-items     : center;
}

.about-image {
    flex-shrink     : 0;
    width           : 320px;
}

.about-image img {
    width           : 100%;
    height          : 420px;
    object-fit      : cover;
    border-radius   : 4px;
}

.about-content {
    flex            : 1;
    position        : relative;
}

.about-watermark {
    position        : absolute;
    top             : -10px;
    left            : -10px;
    font-size       : 5rem;
    font-weight     : 800;
    color           : rgba(200, 169, 110, 0.12);
    white-space     : nowrap;
    pointer-events  : none;
    z-index         : 0;
    line-height     : 1;
}

.about-ornament {
    color           : var(--accent);
    font-size       : 1.2rem;
    margin-bottom   : 0.5rem;
}

.about-eyebrow {
    font-size       : 0.68rem;
    font-weight     : 500;
    letter-spacing  : 0.18em;
    text-transform  : uppercase;
    color           : var(--accent);
    margin-bottom   : 0.75rem;
    position        : relative;
    z-index         : 1;
}

.about-heading {
    font-size       : 1.9rem;
    font-weight     : 600;
    line-height     : 1.3;
    color           : var(--ink);
    margin-bottom   : 1rem;
    position        : relative;
    z-index         : 1;
}

.about-body {
    font-size       : 0.9rem;
    line-height     : 1.75;
    color           : var(--ink-muted);
    margin-bottom   : 2rem;
    position        : relative;
    z-index         : 1;
}

/* ── Stats ──────────────────────────────────────────────────────── */

.about-stats {
    display         : flex;
    align-items     : center;
    gap             : 1.5rem;
    margin-bottom   : 2rem;
    position        : relative;
    z-index         : 1;
}

.stat {
    display         : flex;
    flex-direction  : column;
}

.stat-number {
    font-size       : 1.6rem;
    font-weight     : 700;
    color           : var(--accent);
}

.stat-label {
    font-size       : 0.75rem;
    color           : var(--ink-muted);
}

.stat-divider {
    width           : 1px;
    height          : 40px;
    background      : var(--accent);
    opacity         : 0.4;
}

/* ── Signature ──────────────────────────────────────────────────── */

.about-signature {
    display         : flex;
    flex-direction  : column;
    position        : relative;
    z-index         : 1;
}

.signature-name {
    font-family     : 'Brush Script MT', cursive;
    font-size       : 1.8rem;
    color           : var(--ink);
}

.signature-title {
    font-size       : 0.78rem;
    color           : var(--ink-muted);
    letter-spacing  : 0.05em;
}

/* ── Divider Banner ─────────────────────────────────────────────── */

.about-divider-banner {
    background      : #b8a264;
    height          : 80px;
    display         : flex;
    align-items     : center;
    justify-content : space-around;
    padding         : 0 5rem;
}

.about-divider-banner .star {
    color           : white;
    font-size       : 2rem;
}

/* ── Vision & Mission ───────────────────────────────────────────── */

.vision-mission-section {
    background         : url('/images/metrorest_main_home.jpg') center/cover no-repeat;
    position           : relative;
}

.vision-mission-overlay {
    background: rgba(120, 85, 10, 0.72);
    padding   : 3.5rem 2rem;
}

.vision-mission-grid {
    max-width       : 1000px;
    margin          : 0 auto;
    display         : grid;
    grid-template-columns: 1fr 1fr;
    gap             : 2rem;
}

.vision-mission-img {
    width           : 24px;
    height          : 24px;
}

.vision-mission-img-eye {
    width           : 34px;
    height          : 20px;
}

.vm-card {
    border-radius   : 6px;
    padding         : 2rem;
}

/* ORIGINAL CODE */
/* .vm-icon {
    width           : 42px;
    height          : 42px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 1.1rem;
    margin-bottom   : 1rem;
}

.vm-card h4 {
    font-size       : 1.2rem;
    font-weight     : 600;
    color           : #fff;
    margin-bottom   : 0.75rem;
    display         : flex;
    align-items     : center;
    gap             : 0.5rem;
} */
/* ORIGINAL CODE */





/* modified code */
.vm-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vm-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vm-card h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}
/* modified code */





.vm-card p {
    font-size       : 0.85rem;
    line-height     : 1.75;
    color           : #fff;
}

/* ── Reviews ────────────────────────────────────────────────────── */

.reviews-section {
    background      : #faf6ef;
    padding         : 4rem 2rem 5rem;
    text-align      : center;
    position        : relative;
}

.reviews-watermark {
    position        : absolute;
    top             : 60px;
    left            : 50%;
    transform       : translateX(-50%);
    font-size       : 5rem;
    font-weight     : 800;
    color           : rgba(200, 169, 110, 0.10);
    white-space     : nowrap;
    pointer-events  : none;
    z-index         : 0;
}

.reviews-heading {
    font-size       : 2rem;
    font-weight     : 700;
    color           : var(--ink);
    margin-bottom   : 2.5rem;
    position        : relative;
    z-index         : 1;
}

.reviews-grid {
    max-width       : 1000px;
    margin          : 0 auto;
    display         : grid;
    grid-template-columns: 1fr 1fr;
    gap             : 1.5rem;
    position        : relative;
    z-index         : 1;
}

.review-card {
    background      : white;
    border          : 1px solid rgba(200, 169, 110, 0.2);
    border-radius   : 6px;
    padding         : 1.75rem;
    text-align      : left;
    position        : relative;
}

.review-stars {
    color           : var(--accent);
    font-size       : 1rem;
    margin-bottom   : 0.75rem;
}

.review-stars span {
    color           : var(--ink);
    font-size       : 0.85rem;
    margin-left     : 0.25rem;
}

.review-title {
    font-size       : 1rem;
    font-weight     : 600;
    color           : var(--accent);
    margin-bottom   : 0.75rem;
}

.review-body {
    font-size       : 0.8rem;
    line-height     : 1.7;
    color           : var(--ink-muted);
    margin-bottom   : 1.25rem;
}

.review-author {
    display         : flex;
    align-items     : center;
    gap             : 0.75rem;
}

.review-author img {
    width           : 40px;
    height          : 40px;
    border-radius   : 50%;
    object-fit      : cover;
}

.author-name {
    display         : block;
    font-size       : 0.85rem;
    font-weight     : 600;
    color           : var(--ink);
}

.author-role {
    display         : block;
    font-size       : 0.72rem;
    color           : var(--ink-muted);
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .about-container {
        flex-direction  : column;
    }

    .about-image {
        width           : 100%;
    }

    .vision-mission-grid,
    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .about-hero-overlay h1 {
        font-size       : 2rem;
    }
}