/* ============================================================
   HonaQahera Theme Variables — edit colors here ONLY
   ============================================================ */
:root {
    /* --- Brand --- */
    --hq-color-primary: #EC448C; /* Pink/Magenta — buttons, footer icons, badge border */
    /* --- Backgrounds --- */
    --hq-bg-body: #333;
    --hq-bg-dark: #111111;
    --hq-bg-header: rgba(31, 31, 31, 0.3);
    --hq-bg-footer: #000;
    --hq-bg-card: #ffffff;
    --hq-bg-overlay: rgba(0, 0, 0, 0.5);
    --hq-bg-carousel: #000;
    /* --- Text --- */
    --hq-text-on-dark: #ffffff; /* White text on dark surfaces */
    --hq-text-on-light: #000000; /* Black text on light surfaces */
    --hq-text-body: #222222;
    --hq-text-muted: #555A4D;
    --hq-text-dialog: #142d56;
    /* --- Accents / Component-specific --- */
    --hq-color-badge-bg: #424F83; /* rz-badge-primary */
    --hq-color-line-border: #ffffff;
    --hq-color-back-btn-fill: #ffffff;
    --hq-bg-right-arrow: #ffffff;
    --hq-text-right-arrow: #000000;
    --hq-bg-more-details: #ffffff;
    --hq-text-more-details: #000000;
    --hq-bg-carousel-border: #ffffff;
    --hq-color-elementor-bg: #555A4D;
    /* -------------------------------------------------------
       Brand Palette — raw color tokens extracted from
       Brand-Colors.png and Logo-Colors.png.
       Use these to wire up themes below.
       ------------------------------------------------------- */
    /* Brand Colors (Brand-Colors.png) */
    --hq-palette-yellow: #E8B520; /* Golden Yellow       — top-left    */
    --hq-palette-navy: #1E2258; /* Dark Navy / Indigo  — top-center  */
    --hq-palette-cream: #EDECE3; /* Warm Cream          — top-right   */
    --hq-palette-emerald: #1A9E68; /* Emerald Green       — bot-left    */
    --hq-palette-crimson: #C03652; /* Crimson Red         — bot-center  */
    --hq-palette-soft-white: #F3F3EE; /* Soft White          — bot-right   */
    /* Logo Colors (Logo-Colors.png) */
    --hq-palette-logo-cream: #EEF0E3; /* Cream / Off-white   — top-left    */
    --hq-palette-sage: #8DB896; /* Sage Green          — top-right   */
    --hq-palette-forest: #2A4840; /* Dark Forest Green   — bot-left    */
    --hq-palette-logo-crimson: #C42830; /* Logo Crimson Red    — bot-right   */
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(31, 58, 102, 0.08);
    --shadow-md: 0 4px 16px rgba(31, 58, 102, 0.12);
    --shadow-lg: 0 8px 32px rgba(31, 58, 102, 0.16);
    --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.3);
    --shadow-glow: 0 0 30px rgba(16, 157, 111, 0.3);
    /* Glass Effect */
    --glass-bg: rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-blur: blur(12px);
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 50%;
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    /* Typography - Professional Fonts */
    --font-heading: 'Cairo', 'Tajawal', sans-serif;
    --font-body: 'Outfit', 'Cairo', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3.5rem;
}

body {
    font-weight: 500;
    background-color: var(--hq-bg-body) !important;
    overflow-x: hidden;
}

.elementor-2501 .elementor-element.elementor-element-16b5185 .tp-mobile-menu .tp-loop-inner, .elementor-2501 .elementor-element.elementor-element-16b5185 .tp-mobile-menu .tp-mm-c-wrapper, .elementor-2501 .elementor-element.elementor-element-16b5185 .tp-mobile-menu .tp-mm-c-wrapper .tp-loop-inner, .elementor-2501 .elementor-element.elementor-element-16b5185 .tp-mobile-menu .tp-mm-et-wrapper {
    /*background-color: rgba(0,0,0,0.2);*/
    background-color: var(--hq-color-elementor-bg);
}

.rz-card.rz-variant-filled {
    background-color: var(--hq-bg-card);
}

header {
    /* background-color: #1F1F1F; */
    background-color: var(--hq-bg-header);
    color: var(--hq-text-on-dark);
}

/* Home-page header: fixed at top, outside #video-container so it is
   in the root stacking context and receives pointer events correctly. */
.hq-fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    padding: 15px;
    pointer-events: auto;
}

.transparent-dropdown {
    color: var(--hq-text-on-dark) !important;
}

select {
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
}

.ddlvalue {
    color: var(--hq-text-on-light);
}

.GradientBG {
    position: absolute; /* Positioning to allow for covering */
    /* background-color: var(--hq-bg-dark) !important; */
    /*background-image: url("../images/5/home_page.png");*/
    left: 50%; /* Center the video */
    top: 50%; /* Center the video */
    min-width: 100%;
    min-height: 100%;
    width: auto; /* Maintain aspect ratio */
    height: 100vh; /* Maintain aspect ratio */
    margin: 0;
    transform: translate(-50%, -50%); /* Center the video */
    object-fit: contain; /* Ensure the video covers the container */
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: center center;
}

h5, .rz-text-h5 .rz-m-0 {
    color: var(--hq-text-on-light) !important;
}

.GradientBG[dir="rtl"] {
    .cardTextDetails, .TextInsideCard, .rz-body, .body-content, .rz-text-h4, .rz-text-h6

{
    padding-right: unset !important;
}

}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--hq-bg-overlay);
}


.RadzenCardCustomClass {
    /*         background: rgba(204, 214, 180, .6);*/
    background-color: var(--hq-bg-card) !important;
}
/*     #video-container {
                                        position: fixed;
                                        left: 0;
                                        top: 0;
                                        height: 100%;
                                        width: 100%;
                                        background-image: url("images/2/videos/RamadanHomeBG_LQ.gif");
                                        background-color: transparent;
                                        position: absolute;
                                        background-repeat: no-repeat;
                                        object-fit: cover;
                                        z-index: -1;
                                    }
                                 */
#video-container {
    position: relative;
    width: 100%;
    height: 100vh;
    /* For Ramadan Only*/
    /* background-image: url("images/2/videos/RamadanHomeBG_LQ.gif"); */
    background-image: url("/images/12/Videos/Home_BG.gif");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
}

/* Fills the entire fixed container height (still needed for the header placement) */
.full-height-layout {
    height: 100%;
}

/* ============================================================
   Discover Our Menu — fixed above the footer on every device.
   Adjust the bottom values below while browsing to fine-tune.
   ============================================================ */
.discover-menu-section {
    position: fixed;
    bottom: 95px;   /* ── Desktop default (≥1200px) */
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 100;
    pointer-events: auto;
}

/* ── Large tablets / small laptops (768px – 1199px) ───────── */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .discover-menu-section { bottom: 90px; }
}

/* ── Generic tablet portrait (768px – 1024px) ─────────────── */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .discover-menu-section { bottom: 88px; }
}

/* ── iPad Mini / iPad Air portrait (768px wide) ───────────── */
@media only screen
  and (min-width: 768px) and (max-width: 768px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .discover-menu-section { bottom: 88px; }
}

/* ── iPad Pro 11" portrait (834px wide) ───────────────────── */
@media only screen
  and (min-width: 834px) and (max-width: 834px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .discover-menu-section { bottom: 90px; }
}

/* ── Generic phones (≤767px) ──────────────────────────────── */
@media screen and (max-width: 767px) {
    .discover-menu-section { bottom: 110px; }
}

/* ── iPhone XR / 11  (414×896 pt, 2×) ─────────────────────── */
@media only screen
  and (min-width: 414px) and (max-width: 414px)
  and (min-height: 896px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .discover-menu-section { bottom: 125px; }
}

/* ── iPhone 14 Plus / 13 Pro Max / 12 Pro Max (428×926 pt, 3×) */
@media only screen
  and (min-width: 428px) and (max-width: 430px)
  and (min-height: 920px)
  and (-webkit-min-device-pixel-ratio: 3) {
    .discover-menu-section { bottom: 108px; }
}

/* ── iPhone 14 / 13 / 12 (390×844 pt, 3×) ─────────────────── */
@media only screen
  and (min-width: 390px) and (max-width: 393px)
  and (min-height: 840px)
  and (-webkit-min-device-pixel-ratio: 3) {
    .discover-menu-section { bottom: 105px; }
}

/* ── iPhone 14 Pro / 15 Pro (393×852 pt, 3×) ──────────────── */
@media only screen
  and (min-width: 393px) and (max-width: 393px)
  and (min-height: 852px)
  and (-webkit-min-device-pixel-ratio: 3) {
    .discover-menu-section { bottom: 108px; }
}

/* ── iPhone 15 Pro Max / 14 Pro Max (430×932 pt, 3×) ──────── */
@media only screen
  and (min-width: 430px) and (max-width: 430px)
  and (min-height: 930px)
  and (-webkit-min-device-pixel-ratio: 3) {
    .discover-menu-section { bottom: 110px; }
}

/* ── iPhone 11 Pro / XS / X (375×812 pt, 3×) ──────────────── */
@media only screen
  and (min-width: 375px) and (max-width: 375px)
  and (min-height: 812px)
  and (-webkit-min-device-pixel-ratio: 3) {
    .discover-menu-section { bottom: 105px; }
}

/* ── iPhone 8 / 7 / 6s (375×667 pt, 2×) ───────────────────── */
@media only screen
  and (min-width: 375px) and (max-width: 375px)
  and (max-height: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .discover-menu-section { bottom: 100px; }
}

/* ── iPhone SE 2nd / 3rd gen (375×667 pt, 2×) — same as above */

/* ── iPhone SE 1st gen (320×568 pt, 2×) ───────────────────── */
@media only screen
  and (max-width: 320px)
  and (max-height: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .discover-menu-section { bottom: 110px; }
}

/* ── Common Android phones  ≤360px wide ───────────────────── */
@media screen and (max-width: 360px) {
    .discover-menu-section { bottom: 110px; }
}

/* ── Galaxy S20 / S21 / S22 (360×800 pt, 3×) ──────────────── */
@media only screen
  and (min-width: 360px) and (max-width: 360px)
  and (min-height: 800px)
  and (-webkit-min-device-pixel-ratio: 3) {
    .discover-menu-section { bottom: 108px; }
}

/* ── Pixel 6 / 7 (412×915 pt, 2.6×) ───────────────────────── */
@media only screen
  and (min-width: 412px) and (max-width: 412px)
  and (min-height: 915px) {
    .discover-menu-section { bottom: 108px; }
}

/* Mobile: fit GIF to full screen width, preserve natural height (no stretching).
   Centered both horizontally and vertically. */
@media screen and (max-width: 767px) {
    #video-container {
        background-size: 100% auto;
        background-position: center center;
    }
}

/* Tablet: show the full GIF without cropping any edges */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    #video-container {
        background-size: contain;
    }
}

/* Desktop: natural image size, no upscaling */
@media screen and (min-width: 1200px) {
    #video-container {
        background-size: auto;
    }
}

.line {
    width: 40px;
    height: 25px;
    border-bottom: 1px solid var(--hq-color-line-border);
    position: absolute;
    margin-left: 30px;
}


/*#video-container {
    position: absolute;*/ /* Positioning to allow for covering */
/* For Ramadan Only*/
/* background-image: url("images/2/videos/RamadanHomeBG_LQ.gif"); */

/*background-image: url("images/2/videos/background-video.gif");
    left: 50%;*/ /* Center the video */
/*top: 50%;*/ /* Center the video */
/*min-width: 100%;*/ /* Ensure it covers full width */
/*min-height: 100%;*/ /* Ensure it covers full height */
/*width: auto;*/ /* Maintain aspect ratio */
/*height: auto;*/ /* Maintain aspect ratio */
/*transform: translate(-50%, -50%);*/ /* Center the video */
/*object-fit: cover;*/ /* Ensure the video covers the container */
/*background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 2;
}*/
.back-btn svg {
    fill: var(--hq-color-back-btn-fill);
}

.fixed-header-wrapper {
    background-color: #FFCE00 !important;
}
.rz-card {
    padding: unset !important;
    /* max-width: 190px; */
}

    .rz-card img {
        width: 150px;
        height: 120px;
        /* border-radius: 10%; */
        transition: transform 1.5s;
        height: auto;
        max-width: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
        vertical-align: middle;
        text-align: center;
        z-index: 10;
    }

        .rz-card img:hover {
            transform: scale(1.2);
        }

.headerlogo {
    height: auto;
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    vertical-align: middle;
    text-align: center;
    z-index: 10;
}

.more-details {
    color: var(--hq-text-more-details);
    background-color: var(--hq-bg-more-details);
}

.rz-carousel-items {
    background-color: var(--hq-bg-carousel) !important;
    border: 10px solid var(--hq-bg-carousel-border) !important;
    max-height: 150px !important;
}

.rz-badge-primary.rz-shade-light {
    background-color: var(--hq-color-badge-bg) !important;
    color: var(--hq-text-on-dark) !important;
}


.rz-background-color-secondary-dark {
    background-color: unset !important;
}

.MainButton {
    background-color: var(--hq-color-primary) !important;
    color: var(--hq-text-on-dark) !important;
}

.MainButton:hover {
    /*background-color: unset !important;*/
    color: unset !important;
}

.rz-g > div {
    padding-left: 10px !important;
}

/*.rz-display-flex{*/ /* Override CSS Class */
    /*padding-bottom: 2rem !important;
}*/

.DialogItemMainColor {
    color: var(--hq-text-dialog);
}

button[disabled] {
    pointer-events: none;
}

a:hover {
}

/*.Background-color-white{
    background-color: white !important;
}
*/
.InsidePage_Category {
    background-image: url('/images/12/PrimaryLogo.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 180px;
    padding-bottom: 10px;
}

.VideoListText {
    color: var(--hq-text-muted) !important;
}

.bodySubComponent {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /*    background: radial-gradient(ellipse at bottom, #ccd6b4 0%, #0c0d13 160%);*/
    overflow: hidden;
}

.cardTextDetails {
    color: var(--hq-text-body);
    background-color: rgba(255, 255, 255, 0);
}

.TextInsideCard {
    padding-left: 10px;
}

.RightArror {
    background-color: var(--hq-bg-right-arrow) !important;
    color: var(--hq-text-right-arrow) !important;
}

.footer {
    /* Semi-transparent background */
    background-color: var(--hq-bg-footer);
    opacity: 0.8;
    /*background-color: #e7d4c2;*/
    color: black;
}

.footer {
    /*background-color: rgba(0,0,0,0.3);*/
    /* margin-top: 50px; */
    /*height: 60px;*/
    z-index: 999;
}

.footer a span {
    color: var(--hq-color-primary) !important;
}

.rz-body {
    padding: unset !important;
}

.FooterSVGColor {
    /*fill: #f27678;*/
    fill: var(--hq-color-primary);
}

/* ── Discover Our Menu — futuristic shiny button ─────────────── */
.discover-btn {
    position: relative;
    overflow: hidden;
    display: inline-block;
    padding: 15px 38px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(236,68,140,0.08) 0%, rgba(236,68,140,0.18) 100%) !important;
    border: 1px solid var(--hq-color-primary) !important;
    border-radius: 2px !important;
    box-shadow:
        0 0 10px rgba(236, 68, 140, 0.45),
        0 0 28px rgba(236, 68, 140, 0.18),
        inset 0 0 14px rgba(236, 68, 140, 0.07);
    text-shadow: 0 0 10px rgba(236, 68, 140, 0.9), 0 0 22px rgba(236, 68, 140, 0.45);
    animation: hq-btn-pulse 2.8s ease-in-out infinite;
    transition: box-shadow 0.35s ease, text-shadow 0.35s ease, background 0.35s ease;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Sweeping shine pass */
.discover-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -110%;
    width: 65%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 100%
    );
    animation: hq-btn-shine 2.8s ease-in-out infinite;
    pointer-events: none;
}

/* Top-edge highlight line */
.discover-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    pointer-events: none;
}

.discover-btn:hover {
    background: linear-gradient(135deg, rgba(236,68,140,0.18) 0%, rgba(236,68,140,0.32) 100%) !important;
    box-shadow:
        0 0 18px rgba(236, 68, 140, 0.75),
        0 0 48px rgba(236, 68, 140, 0.35),
        inset 0 0 20px rgba(236, 68, 140, 0.12) !important;
    text-shadow: 0 0 14px rgba(236, 68, 140, 1), 0 0 32px rgba(236, 68, 140, 0.65) !important;
}

/* Pulsing border glow */
@keyframes hq-btn-pulse {
    0%, 100% {
        border-color: rgba(236, 68, 140, 0.65);
        box-shadow:
            0 0 10px rgba(236, 68, 140, 0.35),
            0 0 22px rgba(236, 68, 140, 0.12),
            inset 0 0 10px rgba(236, 68, 140, 0.05);
    }
    50% {
        border-color: rgba(236, 68, 140, 1);
        box-shadow:
            0 0 20px rgba(236, 68, 140, 0.70),
            0 0 44px rgba(236, 68, 140, 0.30),
            inset 0 0 18px rgba(236, 68, 140, 0.10);
    }
}

/* Sweeping shine keyframes */
@keyframes hq-btn-shine {
    0%   { left: -110%; }
    55%  { left: 120%; }
    100% { left: 120%; }
}


/* ============================================================
   THEME B — Gold & Navy
   Activate: add class "hq-theme-gold-navy" to <html> or <body>

   Palette:  Golden Yellow primary on a deep Navy background.
             Cream text and card surfaces. Emerald badge accent.
   ============================================================ */
.hq-theme-gold-navy {
    /* Brand */
    --hq-color-primary:         var(--hq-palette-yellow);

    /* Backgrounds */
    --hq-bg-body:               var(--hq-palette-navy);
    --hq-bg-dark:               #0D1040;                        /* deeper navy for GradientBG */
    --hq-bg-header:             rgba(30, 34, 88, 0.2);
    --hq-bg-footer:             #12164A;                        /* slightly lighter than body */
    --hq-bg-card:               var(--hq-palette-cream);
    --hq-bg-overlay:            rgba(18, 22, 74, 0.55);
    --hq-bg-carousel:           var(--hq-palette-navy);

    /* Text */
    --hq-text-on-dark:          var(--hq-palette-cream);
    --hq-text-on-light:         var(--hq-palette-navy);
    --hq-text-body:             var(--hq-palette-navy);
    --hq-text-muted:            var(--hq-palette-sage);
    --hq-text-dialog:           var(--hq-palette-navy);

    /* Accents */
    --hq-color-badge-bg:        var(--hq-palette-emerald);
    --hq-color-line-border:     var(--hq-palette-yellow);
    --hq-color-back-btn-fill:   var(--hq-palette-yellow);
    --hq-bg-right-arrow:        var(--hq-palette-yellow);
    --hq-text-right-arrow:      var(--hq-palette-navy);
    --hq-bg-more-details:       var(--hq-palette-cream);
    --hq-text-more-details:     var(--hq-palette-navy);
    --hq-bg-carousel-border:    var(--hq-palette-yellow);
    --hq-color-elementor-bg:    var(--hq-palette-forest);
}


/* ============================================================
   THEME C — Forest & Sage
   Activate: add class "hq-theme-forest-sage" to <html> or <body>

   Palette:  Emerald Green primary on a Dark Forest background.
             Logo Cream text and card surfaces. Sage muted tones.
   ============================================================ */
.hq-theme-forest-sage {
    /* Brand */
    --hq-color-primary:         var(--hq-palette-emerald);

    /* Backgrounds */
    --hq-bg-body:               var(--hq-palette-forest);
    --hq-bg-dark:               #1A2E2A;                        /* darker forest for GradientBG */
    --hq-bg-header:             rgba(42, 72, 64, 0.85);
    --hq-bg-footer:             #1E3630;                        /* slightly lighter than body */
    --hq-bg-card:               var(--hq-palette-logo-cream);
    --hq-bg-overlay:            rgba(26, 46, 42, 0.55);
    --hq-bg-carousel:           var(--hq-palette-forest);

    /* Text */
    --hq-text-on-dark:          var(--hq-palette-logo-cream);
    --hq-text-on-light:         var(--hq-palette-forest);
    --hq-text-body:             var(--hq-palette-forest);
    --hq-text-muted:            var(--hq-palette-sage);
    --hq-text-dialog:           var(--hq-palette-forest);

    /* Accents */
    --hq-color-badge-bg:        var(--hq-palette-navy);
    --hq-color-line-border:     var(--hq-palette-sage);
    --hq-color-back-btn-fill:   var(--hq-palette-logo-cream);
    --hq-bg-right-arrow:        var(--hq-palette-logo-cream);
    --hq-text-right-arrow:      var(--hq-palette-forest);
    --hq-bg-more-details:       var(--hq-palette-logo-cream);
    --hq-text-more-details:     var(--hq-palette-forest);
    --hq-bg-carousel-border:    var(--hq-palette-sage);
    --hq-color-elementor-bg:    var(--hq-palette-forest);
}

/* Extra bottom clearance so page content is not hidden behind the footer decoration banner */
.body-content {
    padding-bottom: 130px; /* footer (~75px) + deco banner (48px) + 7px gap */
}

@media (max-width: 576px) {
    .body-content {
        padding-bottom: 112px; /* footer (~70px) + deco banner (36px) + 6px gap */
    }
}

/* ============================================================
   Internal Pages — 3_Food.png Decorative Background (TenantId 12)
   ============================================================ */

/* Override body background to a warm neutral so the pattern blends elegantly */
body {
    /*background-color: #f8f5f0 !important;*/
}

/* Tiled pattern via ::before pseudo-element so opacity is isolated from content */
.GradientBG {
    position: relative !important;
    background: transparent !important;
    transform: none !important;
    left: unset !important;
    top: unset !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    margin: 0 !important;
    object-fit: unset !important;
}

.GradientBG::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/12/general.png');
    /* Desktop: tile at natural image dimensions */
    background-repeat: repeat;
    background-size: auto;
    background-position: top center;
    opacity: 0.8;
    z-index: 0;
    pointer-events: none;
}

.GradientBG.bg-drinks::before { background-image: url('/images/12/Drinks.png'); }
.GradientBG.bg-shisha::before { background-image: url('/images/12/Shisha.png'); }
.GradientBG.bg-food::before { background-image: url('/images/12/Food.png'); }

/* Mobile: scale image to viewport width and repeat vertically */
@media screen and (max-width: 767px) {
    .GradientBG::before {
        background-size: 100% auto;
        background-repeat: repeat-y;
        background-position: top center;
        opacity: 0.25;
    }
}

/* Tablet: two columns of the pattern */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .GradientBG::before {
        background-size: 50% auto;
        background-repeat: repeat;
        opacity: 0.11;
    }
}

/* Ensure layout children render above the pseudo-element */
.GradientBG > * {
    position: relative;
    z-index: 1;
}

/* ── Frosted-glass content area ────────────────────────────── */
/* Creates a bright, blurred centre so text is comfortably readable
   against the decorative tiled background                        */
.body-content {
    /* background: rgba(255, 255, 255, 0.78); */
    /* backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px); */
    border-radius: 6px;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
}

/* Radzen body wrapper must also be transparent so the blur shows through */
.rz-body {
    background: transparent !important;
}

/* Cards remain fully opaque for readability */
.rz-card.rz-variant-filled,
.RadzenCardCustomClass {
    background-color: #ffffff !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   Home Page Gallery Section — below the hero GIF
   ============================================================ */

/* 100 vh spacer that pushes gallery below the fixed GIF backdrop */
.hq-hero-spacer {
    height: 100vh;
    width: 100%;
    pointer-events: none;
    display: block;
}

/* ============================================================
   Gallery section — single-scroll layout.
   Video panel sticks to the viewport while the user scrolls
   through all gallery images on the right. No inner scroll.
   ============================================================ */
.hq-home-gallery-section {
    position: relative;
    z-index: 10;
    background-color: var(--hq-bg-dark);
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    display: flex;
    flex-direction: row;
    /* Height grows with the gallery images — no fixed 100vh */
    height: auto;
    /* Clearance for fixed footer + decoration banner */
    padding-bottom: 130px;
    box-sizing: border-box;
}

/* ── Video panel (left) — sticky while gallery rows scroll ── */
.hq-home-gallery-video-panel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    /* Stick to top of viewport; requires align-self: flex-start */
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: flex-start;
}

.hq-home-gallery-video-panel .video-player-wrapper,
.hq-home-gallery-video-panel .video-player-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Gallery images panel (right) — natural height ────────── */
.hq-home-gallery-images-panel {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 8px;
    box-sizing: border-box;
}

/* ── Inline gallery grid ─────────────────────────────────── */
.hq-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.hq-gallery-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
}

.hq-gallery-item.hq-gallery-large {
    grid-column: span 2;
    grid-row: span 2;
}

.hq-gallery-item.hq-gallery-wide {
    grid-column: span 2;
}

.hq-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.hq-gallery-item:hover img {
    transform: scale(1.04);
}

/* ── Tablet (768px – 1199px): side-by-side, sticky video ──── */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .hq-home-gallery-section {
        padding-bottom: 112px;
    }
}

/* ── Mobile (≤ 767px): stacked vertically, no sticky ──────── */
@media screen and (max-width: 767px) {
    .hq-home-gallery-section {
        flex-direction: column;
        padding-bottom: 112px;
        width: 100%;
        max-width: 100vw;
    }

    /* Compact video strip at top — not sticky on mobile */
    .hq-home-gallery-video-panel {
        position: static;
        height: 40vw;
        min-height: 180px;
        max-height: 260px;
        flex: none;
        align-self: auto;
        width: 100%;
    }

    .hq-home-gallery-images-panel {
        padding: 6px;
        width: 100%;
        max-width: 100%;
    }

    /* On mobile, drop the large item's row-span so it doesn't force
       the grid taller than the viewport width and cause overflow */
    .hq-gallery-item.hq-gallery-large {
        grid-column: span 2;
        grid-row: span 1;
        aspect-ratio: 16 / 9;
    }

    /* Wide items retain their 2-col span with a landscape ratio */
    .hq-gallery-item.hq-gallery-wide {
        aspect-ratio: 16 / 9;
    }

    /* Standard items use a square ratio */
    .hq-gallery-item {
        aspect-ratio: 1;
    }
}

/* ── Small phones (≤ 360px): tighter video height ───────── */
@media screen and (max-width: 360px) {
    .hq-home-gallery-video-panel {
        height: 45vw;
        min-height: 160px;
    }
}


/* ==========================================================================
   Contact Page
   ========================================================================== */

/* ── Two-column layout: contact info left, map right (TenantId 12 only) ──
   Uses the RAM pattern (Repeat / Auto-fit / Minmax) — no breakpoints needed.
   Columns go side-by-side once the container is wide enough to fit two
   460 px columns (~920 px). Below that they stack automatically.         ── */
.hq-contact-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    align-items: stretch;   /* both columns share the same row height      */
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Info column — let HonaQaheraContactUs drive its own height */
.hq-contact-info-col {
    min-width: 0;
}

/* Map column — flex column so the map stretches to fill the full height */
.hq-contact-map-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ── Base map container ── */
.contact-map {
    width: 100%;
    /* Mobile / stacked default height */
    height: 280px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-xl);
    border: 2px solid var(--glass-border);
    box-sizing: border-box;
}

    .contact-map iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        filter: grayscale(30%) contrast(1.1);
    }

/* When the map is inside the layout column it must fill the full
   column height (which equals the contact-info column height).    */
.hq-contact-map-col .contact-map {
    flex: 1;              /* grow to fill the flex column               */
    height: auto;         /* let flex determine height, not a fixed px  */
    min-height: 280px;    /* guard for very short viewports             */
    margin-bottom: 0;
    border-radius: 0;     /* full-bleed flush against the info panel    */
    border-left: none;    /* shared border with info column is enough   */
}

/* Tablet: taller standalone map (only when NOT in the two-column layout) */
@media (min-width: 768px) {
    .contact-map {
        height: 360px;
    }
    /* Inside the layout column height is flex-driven, keep override */
    .hq-contact-map-col .contact-map {
        height: auto;
    }
}

/* Desktop: taller standalone map */
@media (min-width: 1200px) {
    .contact-map {
        height: 450px;
    }
    /* Inside the layout column height is flex-driven, keep override */
    .hq-contact-map-col .contact-map {
        height: auto;
    }
}

.contact-info {
    display: grid;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

@media (min-width: 768px) {
    .contact-info {
        grid-template-columns: repeat(3, 1fr);
    }
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

    .contact-info-item:hover {
        border-color: var(--color-gold);
        transform: translateY(-4px);
    }

.contact-info-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-nile-teal), var(--color-nile-turquoise-light));
    border-radius: var(--radius-md);
    color: var(--color-white);
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.contact-info-content h4 {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-xs);
    color: var(--color-gold);
}

.contact-info-content p {
    font-size: var(--font-size-sm);
    color: var(--color-cream);
    opacity: 0.9;
    margin: 0;
    line-height: 1.5;
}