/* ====== Brand tokens (from the logo: black Kaaba, gold star, cream) ====== */
.um {
    --ink: #15120D;
    --ink-2: #221D14;
    --gold: #C9A24B;
    --gold-deep: #8A6A1F;
    --gold-soft: #E6CF93;
    --cream: #FBF6EA;
    --cream-2: #F3EAD3;
    --text: #3B352A;
    --muted: #6E6656;
    --line: rgba(21, 18, 13, .12);
    --radius: 18px;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text);
    background: var(--cream);
    line-height: 1.65;
    overflow-x: hidden;
}
.um *, .um *::before, .um *::after { box-sizing: border-box; }
.um img { max-width: 100%; display: block; }
.um a { text-decoration: none; }
.um h1, .um h2, .um h3, .um h4 {
    font-family: 'Fraunces', Georgia, serif;
    color: var(--ink);
    line-height: 1.12;
    margin: 0;
    font-weight: 600;
}
.um p { margin: 0; }
.um-wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.um-section { padding: clamp(64px, 9vw, 112px) 0; }
.um-head { max-width: 640px; margin-bottom: 48px; }
.um-head.center { margin-inline: auto; text-align: center; }
.um-tag {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    color: var(--gold-deep);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
    background: rgba(201, 162, 75, .1);
}
.um-title { font-size: clamp(30px, 4vw, 46px); margin-bottom: 16px; }
.um-lead { font-size: 17px; color: var(--muted); }

/* image boxes: gradient shows if a photo fails to load */
.um-ph {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ink-2), var(--gold-deep));
}
.um-ph img { width: 100%; height: 100%; object-fit: cover; }

/* buttons */
.um-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600; font-size: 15px;
    border: 1.5px solid transparent;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    cursor: pointer;
}
.um-btn:hover { transform: translateY(-2px); }
.um-btn:focus-visible, .um-dot:focus-visible, .um-arrow:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 3px; }
.um-btn--gold { background: var(--gold); color: var(--ink); }
.um-btn--gold:hover { background: var(--gold-soft); color: var(--ink); }
.um-btn--line { border-color: rgba(255, 255, 255, .5); color: #fff; }
.um-btn--line:hover { border-color: var(--gold); color: var(--gold-soft); }
.um-btn--dark { background: #c9a24b; color: black; }
.um-btn--dark:hover { background: var(--ink-2); color: var(--gold-soft); }

/* ====== Hero ====== */
.um-hero {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding: clamp(56px, 8vw, 96px) 0 clamp(72px, 9vw, 120px);
    overflow: hidden;
}
.um-hero::before {
    content: ""; position: absolute; inset: 0; opacity: .07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 6l8 14 16-2-2 16 14 8-14 8 2 16-16-2-8 14-8-14-16 2 2-16-14-8 14-8-2-16 16 2z' fill='none' stroke='%23C9A24B' stroke-width='1.4'/%3E%3C/svg%3E");
}
.um-hero::after {
    content: ""; position: absolute; right: -180px; top: -180px; width: 560px; height: 560px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 162, 75, .28), transparent 65%);
}
.um-hero-grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.um-hero h1 { color: #fff; font-size: clamp(36px, 5.2vw, 64px); margin-bottom: 22px; }
.um-hero h1 span { color: var(--gold); font-style: italic; }
.um-hero-text { font-size: 18px; color: rgba(255, 255, 255, .78); max-width: 520px; margin-bottom: 34px; }
.um-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.um-hero-copy { transition: opacity .45s ease, transform .45s ease; }
.um-hero-copy.is-out { opacity: 0; transform: translateY(12px); }

.um-arch-wrap { position: relative; max-width: 460px; margin-inline: auto; width: 100%; }
.um-arch {
    aspect-ratio: 4 / 5;
    border-radius: 999px 999px 24px 24px;
    border: 2px solid var(--gold);
    padding: 10px;
}
.um-arch .um-ph { width: 100%; height: 100%; border-radius: 999px 999px 16px 16px; }
.um-arch .um-ph img { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.um-arch .um-ph img.is-active { opacity: 1; }
.um-badge {
    position: absolute; left: -22px; bottom: 36px;
    background: var(--cream); color: var(--ink);
    padding: 14px 20px; border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    font-weight: 600; font-size: 14px; line-height: 1.35;
}
.um-badge b { display: block; font-family: 'Fraunces', serif; font-size: 18px; color: var(--gold-deep); }

.um-controls { display: flex; align-items: center; gap: 18px; margin-top: 40px; }
.um-dots { display: flex; gap: 10px; }
.um-dot { width: 34px; height: 4px; border-radius: 4px; border: 0; background: rgba(255, 255, 255, .28); cursor: pointer; padding: 0; transition: background .3s, width .3s; }
.um-dot.is-active { background: var(--gold); width: 56px; }
.um-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.um-arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ====== Trust strip ====== */
.um-strip { background: var(--gold); color: var(--ink); }
.um-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.um-strip-item { padding: 22px 20px; display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 15px; border-right: 1px solid rgba(21, 18, 13, .18); }
.um-strip-item:last-child { border-right: 0; }
.um-strip-item svg { flex: 0 0 28px; }

/* ====== About ====== */
.um-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 84px); align-items: center; }
.um-collage { position: relative; padding-bottom: 60px; }
.um-collage .main { aspect-ratio: 5 / 4; border-radius: var(--radius); }
.um-collage .side {
    position: absolute; right: -16px; bottom: 0; width: 46%; aspect-ratio: 1;
    border-radius: var(--radius); border: 8px solid var(--cream);
}
.um-collage .seal {
    position: absolute; left: 22px; top: -22px; width: 104px; height: 104px; border-radius: 50%;
    background: var(--ink); color: var(--gold); display: grid; place-items: center; text-align: center;
    font-family: 'Fraunces', serif; font-size: 13px; line-height: 1.25; border: 3px solid var(--gold);
}
.um-collage .seal b { display: block; font-size: 26px; color: #fff; }
.um-about p + p { margin-top: 16px; }
.um-checks { list-style: none; padding: 0; margin: 26px 0 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.um-checks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--ink); }
.um-checks svg { flex: 0 0 20px; margin-top: 3px; color: var(--gold-deep); }

/* ====== Services ====== */
.um-services { background: var(--cream-2); }
.um-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.um-card {
    background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 34px 30px; transition: transform .25s ease, border-color .25s ease;
}
.um-card:hover { transform: translateY(-5px); border-color: var(--gold); }
.um-card .ico { width: 58px; height: 58px; border-radius: 16px; background: var(--ink); color: var(--gold); display: grid; place-items: center; margin-bottom: 22px; }
.um-card h3 { font-size: 22px; margin-bottom: 10px; }
.um-card p { color: var(--muted); font-size: 15.5px; }

/* ====== Destinations ====== */
.um-dest { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 20px; }
.um-dest-item { position: relative; border-radius: var(--radius); display: block; }
.um-dest-item:first-child { grid-row: span 2; }
.um-dest-item img { transition: transform .6s ease; }
.um-dest-item:hover img { transform: scale(1.06); }
.um-dest-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(21, 18, 13, .85), transparent 60%); }
.um-dest-cap { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; color: #fff; }
.um-dest-cap h3 { color: #fff; font-size: 26px; margin-bottom: 4px; }
.um-dest-cap span { font-size: 14px; color: var(--gold-soft); }

/* ====== Why choose us ====== */
.um-why { background: var(--ink); color: rgba(255, 255, 255, .78); position: relative; overflow: hidden; }
.um-why::before { content: ""; position: absolute; inset: 0; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 6l8 14 16-2-2 16 14 8-14 8 2 16-16-2-8 14-8-14-16 2 2-16-14-8 14-8-2-16 16 2z' fill='none' stroke='%23C9A24B' stroke-width='1.4'/%3E%3C/svg%3E"); }
.um-why .um-wrap { position: relative; z-index: 2; }
.um-why .um-title { color: #fff; }
.um-why .um-lead { color: rgba(255, 255, 255, .7); }
.um-why .um-tag { color: var(--gold); }
.um-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid rgba(201, 162, 75, .35); border-radius: var(--radius); overflow: hidden; }
.um-why-item { padding: 38px 32px; border-right: 1px solid rgba(201, 162, 75, .35); border-bottom: 1px solid rgba(201, 162, 75, .35); }
.um-why-item:nth-child(3n) { border-right: 0; }
.um-why-item:nth-last-child(-n+3) { border-bottom: 0; }
.um-why-item svg { color: var(--gold); margin-bottom: 20px; }
.um-why-item h3 { color: #fff; font-size: 21px; margin-bottom: 10px; }
.um-why-item p { font-size: 15px; }

/* ====== Process ====== */
.um-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: step; position: relative; }
.um-steps::before { content: ""; position: absolute; top: 28px; left: 8%; right: 8%; border-top: 2px dashed var(--gold); z-index: 0; }
.um-step { position: relative; z-index: 1; text-align: center; padding: 0 8px; }
.um-step .n { width: 58px; height: 58px; margin: 0 auto 20px; border-radius: 50%; background: var(--ink); color: var(--gold); font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; display: grid; place-items: center; border: 3px solid var(--cream); box-shadow: 0 0 0 2px var(--gold); }
.um-step h3 { font-size: 20px; margin-bottom: 8px; }
.um-step p { font-size: 15px; color: var(--muted); }

/* ====== CTA ====== */
.um-cta { padding-bottom: clamp(64px, 9vw, 112px); }
.um-cta-box {
    background: linear-gradient(120deg, var(--ink) 55%, var(--ink-2));
    border-radius: 28px; padding: clamp(36px, 6vw, 72px);
    display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between;
    border: 2px solid var(--gold); position: relative; overflow: hidden;
}
.um-cta-box h2 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); max-width: 560px; }
.um-cta-box p { color: rgba(255, 255, 255, .72); margin-top: 12px; max-width: 520px; }
.um-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; position: relative; z-index: 2; }
/* ============================================================
         POPULAR DESTINATIONS — NEW ASYMMETRIC ALIGNMENT
         ============================================================ */
.um-dest-pro {
    background: var(--cream);
    padding: clamp(64px, 9vw, 112px) 0;
}

/* ---- Split header (left title / right button) ---- */
.um-dest-pro-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: end;
    margin-bottom: 48px;
}
.um-dest-pro-head-left { text-align: left; }
.um-dest-pro-head-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.um-dest-pro .gold-accent {
    color: var(--gold-deep);
    font-style: italic;
}

/* ---- Header button ---- */
.um-dest-pro-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--cream);
    border: 1.5px solid var(--ink);
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
    white-space: nowrap;
}
.um-dest-pro-btn:hover {
    background: var(--gold);
    color: var(--ink);
    border-color: var(--gold);
    transform: translateY(-2px);
}
.um-dest-pro-btn svg { transition: transform .25s ease; }
.um-dest-pro-btn:hover svg { transform: translateX(4px); }

/* ---- Asymmetric grid ---- */
.um-dest-pro-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 300px 260px;
    gap: 22px;
}

/* Base card */
.um-dest-pro-card {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ink-2), var(--gold-deep));
    box-shadow: 0 6px 22px rgba(21, 18, 13, .07);
    transition: transform .35s ease, box-shadow .35s ease;
    cursor: pointer;
}
.um-dest-pro-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(21, 18, 13, .18);
}

/* Card image */
.um-dest-pro-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease, filter .4s ease;
    filter: brightness(.88) saturate(.85);
}
.um-dest-pro-card:hover img {
    transform: scale(1.07);
    filter: brightness(1) saturate(1);
}

/* Gradient overlay */
.um-dest-pro-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to top,
            rgba(21, 18, 13, .9) 0%,
            rgba(21, 18, 13, .3) 50%,
            transparent 80%
    );
    z-index: 1;
    pointer-events: none;
}

/* Gold border on hover */
.um-dest-pro-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 2px solid transparent;
    transition: border-color .35s ease;
    z-index: 3;
    pointer-events: none;
}
.um-dest-pro-card:hover::before {
    border-color: var(--gold);
}

/* Text caption */
.um-dest-pro-cap {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    z-index: 2;
    color: #fff;
    transition: transform .35s ease;
}
.um-dest-pro-card:hover .um-dest-pro-cap {
    transform: translateY(-4px);
}
.um-dest-pro-cap h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.15;
}
.um-dest-pro-cap p {
    font-size: 14px;
    font-weight: 500;
    color: var(--gold-soft);
    margin: 0;
    letter-spacing: .02em;
}
.um-dest-pro-cap-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 10px;
}

/* ---- Card placement in the asymmetric grid ---- */

/* Featured wide card — top-left, spans 2 columns */
.um-dest-pro-card--wide:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}
.um-dest-pro-card--wide:nth-child(1) .um-dest-pro-cap h3 {
    font-size: 34px;
}

/* Tall card — top-right, spans 2 rows */
.um-dest-pro-card--tall {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
}
.um-dest-pro-card--tall .um-dest-pro-cap h3 {
    font-size: 28px;
}

/* Small cards — bottom-left area */
.um-dest-pro-card--small:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.um-dest-pro-card--small:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

/* Second wide card — hidden on desktop to keep layout clean */
.um-dest-pro-card--wide:nth-child(5) {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    display: none;
}
/* ============================================================
        HAJJ SECTION — UNIQUE EDITORIAL LAYOUT
        ============================================================ */
.um-hajj {
    background: var(--cream);
    padding: clamp(64px, 9vw, 120px) 0;
    position: relative;
}

/* ===== Top editorial statement ===== */
.um-hajj-statement {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: start;
    padding-bottom: clamp(48px, 6vw, 80px);
    border-bottom: 1px solid var(--line);
    margin-bottom: clamp(48px, 6vw, 80px);
}
.um-hajj-statement-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.um-hajj-mark {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(72px, 10vw, 130px);
    line-height: .9;
    color: var(--gold);
    opacity: .35;
    font-weight: 500;
    letter-spacing: -.02em;
}
.um-hajj-statement-left .um-tag {
    align-self: flex-start;
}

.um-hajj-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(32px, 4.6vw, 60px);
    line-height: 1.08;
    color: var(--ink);
    margin: 0 0 26px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.um-hajj-title em {
    color: var(--gold-deep);
    font-style: italic;
    font-weight: 500;
    position: relative;
    white-space: nowrap;
}
.um-hajj-title em::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 8px;
    background: rgba(201, 162, 75, .25);
    z-index: -1;
    border-radius: 4px;
}
.um-hajj-intro {
    font-size: 17px;
    line-height: 1.75;
    color: var(--muted);
    max-width: 620px;
    margin: 0;
}

/* ===== Middle feature: media collage + text ===== */
.um-hajj-feature {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
    margin-bottom: clamp(56px, 7vw, 96px);
}

.um-hajj-feature-media {
    position: relative;
    padding-bottom: 70px;
    padding-right: 60px;
}
.um-hajj-media-main {
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    overflow: hidden;
}
.um-hajj-media-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.um-hajj-media-side {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 55%;
    aspect-ratio: 1;
    border-radius: 20px;
    overflow: hidden;
    border: 8px solid var(--cream);
    box-shadow: 0 20px 50px rgba(21, 18, 13, .15);
}
.um-hajj-media-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.um-hajj-media-quote {
    position: absolute;
    left: -20px;
    bottom: 90px;
    background: var(--ink);
    color: var(--cream);
    padding: 18px 24px;
    border-radius: 14px;
    border-left: 4px solid var(--gold);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
    max-width: 240px;
}
.um-hajj-quote-ar {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    color: var(--gold);
    margin-bottom: 6px;
    direction: rtl;
    line-height: 1.4;
}
.um-hajj-quote-en {
    display: block;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .7);
    letter-spacing: .02em;
    font-style: italic;
}

.um-hajj-feature-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 22px;
    font-weight: 600;
}
.um-hajj-feature-body p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
    margin: 0 0 18px;
}

/* Values list */
.um-hajj-values {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px dashed var(--line);
}
.um-hajj-value {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.um-hajj-value-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(201, 162, 75, .14);
    color: var(--gold-deep);
    display: grid;
    place-items: center;
    border: 1px solid rgba(201, 162, 75, .3);
}
.um-hajj-value strong {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 3px;
}
.um-hajj-value span {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
}

/* ===== Bottom banner quote ===== */
.um-hajj-banner {
    background: var(--ink);
    border-radius: 24px;
    padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 72px);
    position: relative;
    overflow: hidden;
    text-align: center;
}
.um-hajj-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath d='M45 8l9 16 18-2-2 18 16 9-16 9 2 18-18-2-9 16-9-16-18 2 2-18-16-9 16-9-2-18 18 2z' fill='none' stroke='%23C9A24B' stroke-width='1.3'/%3E%3C/svg%3E");
    pointer-events: none;
}
.um-hajj-banner-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
}
.um-hajj-banner-ar {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(24px, 3vw, 36px);
    color: var(--gold);
    margin-bottom: 20px;
    direction: rtl;
    line-height: 1.5;
}
.um-hajj-banner-text {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: clamp(17px, 2vw, 22px);
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
    margin: 0 0 18px;
}
.um-hajj-banner-ref {
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-soft);
    font-weight: 600;
}

/* Heading Text Colors Update (Kyunke background white hai) */
.partners-marquee .section-label {
    color: #b58d3d !important; /* Golden color for 'Trusted Partners' */
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.partners-marquee h3 {
    color: #333333 !important; /* Dark color for heading */
    font-weight: bold;
}

/* Marquee Track (Container) */
.marquee-track {
    display: flex;
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* Marquee Content (Animated part) */
.marquee-content {
    display: flex;
    align-items: center;
    gap: 60px; /* Logos ke darmiyan fasla */
    width: max-content;
    animation: scrollMarquee 30s linear infinite; /* 30s mein poora loop complete hoga */
}

/* Hover karne par animation rokne ke liye */
.marquee-track:hover .marquee-content {
    animation-play-state: paused;
}

/* Logo Styling */
.partner-logo {
    max-height: 45px; /* Logo ka size chota kar diya */
    width: auto;
    object-fit: contain;
    opacity: 0.6; /* Thoda transparent taake background mein blend ho */
    transition: all 0.3s ease; /* Smooth transition for color change */
    cursor: pointer;
}

/* Hover Effect: Real Color Show */
.partner-logo:hover {
    filter: grayscale(0%); /* Color wapas layein */
    opacity: 1; /* Full visible */
    transform: scale(1.1); /* Thoda sa bada ho jaye */
}

/* Animation Keyframes (Right to Left Scroll) */
@keyframes scrollMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        /* -50% isliye kyunke humne logos ko 2 dafa repeat kiya hai seamless loop ke liye */
        transform: translateX(-50%);
    }
}
/* ====== Responsive ====== */
@media (max-width: 991px) {
    .um-hero-grid, .um-about-grid { grid-template-columns: 1fr; }
    .um-arch-wrap { max-width: 380px; }
    .um-cards, .um-why-grid { grid-template-columns: repeat(2, 1fr); }
    .um-why-item:nth-child(3n) { border-right: 1px solid rgba(201, 162, 75, .35); }
    .um-why-item:nth-child(2n) { border-right: 0; }
    .um-why-item:nth-last-child(-n+3) { border-bottom: 1px solid rgba(201, 162, 75, .35); }
    .um-why-item:nth-last-child(-n+2) { border-bottom: 0; }
    .um-dest { grid-template-columns: 1fr 1fr; grid-template-rows: 280px 220px 220px; }
    .um-dest-item:first-child { grid-column: span 2; grid-row: auto; }
    .um-steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
    .um-steps::before { display: none; }
    .um-strip-grid { grid-template-columns: repeat(2, 1fr); }
    .um-strip-item:nth-child(2) { border-right: 0; }
    .um-strip-item:nth-child(-n+2) { border-bottom: 1px solid rgba(21, 18, 13, .18); }
}
@media (max-width: 640px) {
    .um-cards, .um-why-grid, .um-checks { grid-template-columns: 1fr; }
    .um-why-item { border-right: 0 !important; border-bottom: 1px solid rgba(201, 162, 75, .35) !important; }
    .um-why-item:last-child { border-bottom: 0 !important; }
    .um-dest { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 240px; }
    .um-dest-item:first-child { grid-column: auto; }
    .um-steps { grid-template-columns: 1fr; }
    .um-badge { left: 8px; }
    .um-collage .side { right: 0; }
    .um-strip-grid { grid-template-columns: 1fr; }
    .um-strip-item { border-right: 0 !important; border-bottom: 1px solid rgba(21, 18, 13, .18); }
    .um-strip-item:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .um *, .um *::before, .um *::after { transition: none !important; animation: none !important; }
}
@media (max-width: 991px) {
    .um-dest-pro-card--wide:nth-child(5) {
        display: block;
    }
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .um-dest-pro-head {
        grid-template-columns: 1fr;
        gap: 20px;
        align-items: start;
    }
    .um-dest-pro-head-right {
        justify-content: flex-start;
    }
    .um-dest-pro-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 260px 220px 220px;
    }
    .um-dest-pro-card--wide:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    .um-dest-pro-card--tall {
        grid-column: 1 / 2;
        grid-row: 2 / 4;
    }
    .um-dest-pro-card--small:nth-child(3) {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
    .um-dest-pro-card--small:nth-child(4) {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }
    .um-dest-pro-card--wide:nth-child(5) {
        grid-column: 1 / 3;
        grid-row: 4 / 5;
    }
}

@media (max-width: 640px) {
    .um-dest-pro-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: 220px;
        gap: 16px;
    }
    .um-dest-pro-card--wide:nth-child(1),
    .um-dest-pro-card--tall,
    .um-dest-pro-card--small:nth-child(3),
    .um-dest-pro-card--small:nth-child(4),
    .um-dest-pro-card--wide:nth-child(5) {
        grid-column: auto;
        grid-row: auto;
    }
    .um-dest-pro-cap {
        left: 20px;
        right: 20px;
        bottom: 18px;
    }
    .um-dest-pro-cap h3 { font-size: 22px; }
    .um-dest-pro-card--wide:nth-child(1) .um-dest-pro-cap h3,
    .um-dest-pro-card--tall .um-dest-pro-cap h3 {
        font-size: 24px;
    }
    .um-dest-pro-btn {
        padding: 12px 22px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .um-dest-pro-card,
    .um-dest-pro-card img,
    .um-dest-pro-cap,
    .um-dest-pro-card::before,
    .um-dest-pro-btn,
    .um-dest-pro-btn svg {
        transition: none !important;
    }
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
    .um-hajj-statement {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .um-hajj-mark { font-size: 80px; }
    .um-hajj-feature {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .um-hajj-feature-media {
        max-width: 460px;
        margin-inline: auto;
        padding-right: 50px;
    }
}

@media (max-width: 640px) {
    .um-hajj-mark { font-size: 60px; }
    .um-hajj-feature-media {
        padding-right: 0;
        padding-bottom: 0;
    }
    .um-hajj-media-side {
        position: relative;
        right: auto;
        bottom: auto;
        width: 70%;
        margin: -40px 0 0 auto;
        border-color: var(--cream);
    }
    .um-hajj-media-quote {
        position: relative;
        left: auto;
        bottom: auto;
        margin-top: 20px;
        max-width: 100%;
    }
    .um-hajj-banner { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .um-hajj * { transition: none !important; }
}
/* Section Background - Image 3 ke mutabiq white background */
.partners-marquee {
    background-color: #ffffff; /* White background */
    padding: 40px 0;
    overflow: hidden;
    position: relative;
}