{"id":284,"date":"2026-06-09T15:37:11","date_gmt":"2026-06-09T15:37:11","guid":{"rendered":"https:\/\/alkaabiadvocate.com\/?page_id=284"},"modified":"2026-06-09T15:43:21","modified_gmt":"2026-06-09T15:43:21","slug":"gallery","status":"publish","type":"page","link":"https:\/\/alkaabiadvocate.com\/?page_id=284&lang=en","title":{"rendered":"Gallery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"284\" class=\"elementor elementor-284\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c04ea00 e-con-full e-flex e-con e-parent\" data-id=\"c04ea00\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b2fec8d elementor-widget elementor-widget-html\" data-id=\"b2fec8d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n  Gallery Page (English Version) \u2014 LTR\r\n  Site: Shaima Ghanim Al Kaabi Advocates & Legal Consultants\r\n  Ready to paste in Elementor HTML Widget\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n-->\r\n\r\n<style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Cormorant+Garamond:wght@500;600;700&display=swap');\r\n    @import url('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css');\r\n\r\n    :root {\r\n        --sgk-navy:        #1F3A5F;\r\n        --sgk-navy-dark:   #152843;\r\n        --sgk-gold:        #B89B5E;\r\n        --sgk-gold-bright: #D4B574;\r\n        --sgk-gold-soft:   #E8D9B5;\r\n        --sgk-gold-deep:   #8A7140;\r\n        --sgk-black:       #0A1628;\r\n        --sgk-cream:       #F5F1E8;\r\n        --sgk-white:       #FFFFFF;\r\n        --sgk-dark-gray:   #2C2C2C;\r\n        --sgk-mid-gray:    #8A8A8A;\r\n        --sgk-light-gray:  #E8E5DC;\r\n    }\r\n\r\n    .sgk-gallery-page * { box-sizing: border-box; }\r\n    .sgk-gallery-page {\r\n        font-family: 'Inter', sans-serif;\r\n        color: var(--sgk-dark-gray);\r\n        line-height: 1.7;\r\n        direction: ltr;\r\n    }\r\n    .sgk-gallery-page h1,\r\n    .sgk-gallery-page h2,\r\n    .sgk-gallery-page h3 { font-family: 'Cormorant Garamond', serif; margin: 0; line-height: 1.3; font-weight: 700; }\r\n    .sgk-gallery-page p  { margin: 0; }\r\n    .sgk-gallery-page a  { text-decoration: none; color: inherit; }\r\n\r\n    \/* \u2500\u2500 Animations \u2500\u2500 *\/\r\n    @keyframes sgkGoldShimmer {\r\n        0%   { background-position: 200% center; }\r\n        100% { background-position: -200% center; }\r\n    }\r\n    @keyframes sgkBtnGoldFlow {\r\n        0%   { background-position: 0% center; }\r\n        100% { background-position: -300% center; }\r\n    }\r\n    @keyframes sgkPulseRing {\r\n        0%   { transform: translate(-50%,-50%) scale(1);   opacity: .6; }\r\n        100% { transform: translate(-50%,-50%) scale(1.9); opacity: 0;  }\r\n    }\r\n    @keyframes sgkOverlayIn {\r\n        from { opacity: 0; }\r\n        to   { opacity: 1; }\r\n    }\r\n    @keyframes sgkModalIn {\r\n        from { opacity: 0; transform: scale(.93) translateY(22px); }\r\n        to   { opacity: 1; transform: scale(1)   translateY(0);    }\r\n    }\r\n\r\n    .sgk-fade-in {\r\n        opacity: 0;\r\n        transform: translateY(30px);\r\n        transition: opacity .8s ease, transform .8s ease;\r\n    }\r\n    .sgk-fade-in.sgk-visible { opacity: 1; transform: translateY(0); }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       HERO\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .sgk-gallery-hero {\r\n        background: var(--sgk-navy);\r\n        color: var(--sgk-cream);\r\n        padding: 90px 20px 70px;\r\n        text-align: center;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    .sgk-gallery-hero::before {\r\n        content: '';\r\n        position: absolute;\r\n        inset: 0;\r\n        background:\r\n            radial-gradient(circle at 20% 30%, rgba(184,155,94,.13) 0%, transparent 40%),\r\n            radial-gradient(circle at 80% 70%, rgba(184,155,94,.09) 0%, transparent 40%);\r\n        pointer-events: none;\r\n    }\r\n    .sgk-gallery-hero::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: 0; left: 0; right: 0;\r\n        height: 3px;\r\n        background: linear-gradient(90deg,\r\n            transparent, var(--sgk-gold-deep),\r\n            var(--sgk-gold-bright), var(--sgk-gold-deep), transparent);\r\n    }\r\n\r\n    .sgk-breadcrumb {\r\n        font-size: 13px;\r\n        color: rgba(245,241,232,.7);\r\n        margin-bottom: 18px;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n    .sgk-breadcrumb a { color: var(--sgk-gold); transition: opacity .3s; }\r\n    .sgk-breadcrumb a:hover { opacity: .7; }\r\n    .sgk-breadcrumb-sep { margin: 0 8px; color: var(--sgk-gold); }\r\n\r\n    .sgk-eyebrow {\r\n        display: inline-block;\r\n        font-family: 'Inter', sans-serif;\r\n        padding: 8px 22px;\r\n        background: rgba(184,155,94,.15);\r\n        border: 1px solid var(--sgk-gold);\r\n        border-radius: 30px;\r\n        color: var(--sgk-gold);\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        letter-spacing: 2px;\r\n        margin-bottom: 22px;\r\n        text-transform: uppercase;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .sgk-gallery-hero h1 {\r\n        font-size: 64px;\r\n        color: var(--sgk-white);\r\n        margin-bottom: 20px;\r\n        position: relative;\r\n        z-index: 2;\r\n        line-height: 1.1;\r\n    }\r\n    .sgk-gallery-hero h1 .sgk-highlight {\r\n        background: linear-gradient(90deg,\r\n            var(--sgk-gold-deep), var(--sgk-gold), var(--sgk-gold-bright),\r\n            var(--sgk-gold-soft), var(--sgk-gold-bright), var(--sgk-gold), var(--sgk-gold-deep));\r\n        background-size: 200% auto;\r\n        -webkit-background-clip: text;\r\n        background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        animation: sgkGoldShimmer 4s linear infinite;\r\n    }\r\n    .sgk-gallery-hero p {\r\n        font-size: 17px;\r\n        color: rgba(245,241,232,.85);\r\n        max-width: 680px;\r\n        margin: 0 auto;\r\n        position: relative;\r\n        z-index: 2;\r\n        line-height: 1.7;\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       GALLERY SECTION\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .sgk-gallery-section {\r\n        padding: 90px 20px 100px;\r\n        background: var(--sgk-cream);\r\n    }\r\n\r\n    .sgk-section-header {\r\n        text-align: center;\r\n        margin-bottom: 60px;\r\n        max-width: 800px;\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n        padding: 0 20px;\r\n    }\r\n    .sgk-section-eyebrow {\r\n        display: inline-block;\r\n        font-family: 'Inter', sans-serif;\r\n        font-size: 13px;\r\n        font-weight: 600;\r\n        color: var(--sgk-gold);\r\n        letter-spacing: 3px;\r\n        text-transform: uppercase;\r\n        margin-bottom: 14px;\r\n        position: relative;\r\n        padding: 0 30px;\r\n    }\r\n    .sgk-section-eyebrow::before,\r\n    .sgk-section-eyebrow::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 50%;\r\n        width: 20px;\r\n        height: 1px;\r\n        background: var(--sgk-gold);\r\n    }\r\n    .sgk-section-eyebrow::before { left:  0; }\r\n    .sgk-section-eyebrow::after  { right: 0; }\r\n    .sgk-section-title {\r\n        font-size: 44px;\r\n        color: var(--sgk-navy);\r\n        margin-bottom: 14px;\r\n        line-height: 1.2;\r\n    }\r\n    .sgk-section-subtitle {\r\n        font-size: 16px;\r\n        color: var(--sgk-dark-gray);\r\n        line-height: 1.7;\r\n    }\r\n\r\n    \/* \u2500\u2500 Two-column grid \u2500\u2500 *\/\r\n    .sgk-gallery-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 32px;\r\n        max-width: 1000px;\r\n        margin: 0 auto;\r\n    }\r\n    @media (max-width: 680px) {\r\n        .sgk-gallery-grid { grid-template-columns: 1fr; max-width: 480px; }\r\n    }\r\n\r\n    \/* \u2500\u2500 Video card \u2500\u2500 *\/\r\n    .sgk-gallery-item {\r\n        border-radius: 12px;\r\n        overflow: hidden;\r\n        position: relative;\r\n        background: var(--sgk-navy-dark);\r\n        box-shadow: 0 8px 30px rgba(31,58,95,.11);\r\n        border: 1px solid var(--sgk-light-gray);\r\n        cursor: pointer;\r\n        transition: all .45s cubic-bezier(.4,0,.2,1);\r\n    }\r\n    .sgk-gallery-item:hover {\r\n        transform: translateY(-8px);\r\n        box-shadow: 0 24px 56px rgba(31,58,95,.22);\r\n        border-color: var(--sgk-gold);\r\n    }\r\n    .sgk-gallery-item::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0;\r\n        height: 3px;\r\n        background: linear-gradient(90deg,\r\n            var(--sgk-gold-deep), var(--sgk-gold-bright), var(--sgk-gold-deep));\r\n        background-size: 200% auto;\r\n        z-index: 4;\r\n        transform: scaleX(0);\r\n        transform-origin: center;\r\n        transition: transform .45s ease;\r\n    }\r\n    .sgk-gallery-item:hover::before {\r\n        transform: scaleX(1);\r\n        animation: sgkBtnGoldFlow 3s linear infinite;\r\n    }\r\n\r\n    \/* \u2500\u2500 Thumbnail wrapper \u2500\u2500 *\/\r\n    .sgk-item-thumb {\r\n        position: relative;\r\n        width: 100%;\r\n        background: var(--sgk-navy-dark);\r\n        overflow: hidden;\r\n    }\r\n    .sgk-item-thumb video {\r\n        width: 100%;\r\n        display: block;\r\n        transition: transform .6s ease;\r\n        aspect-ratio: 16 \/ 9;\r\n        object-fit: cover;\r\n    }\r\n    .sgk-gallery-item:hover .sgk-item-thumb video {\r\n        transform: scale(1.03);\r\n    }\r\n\r\n    \/* \u2500\u2500 Play overlay \u2500\u2500 *\/\r\n    .sgk-play-overlay {\r\n        position: absolute;\r\n        inset: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        background: linear-gradient(180deg, transparent 35%, rgba(10,22,40,.5) 100%);\r\n        z-index: 2;\r\n        transition: background .4s ease;\r\n    }\r\n    .sgk-gallery-item:hover .sgk-play-overlay {\r\n        background: linear-gradient(180deg, rgba(10,22,40,.1) 0%, rgba(10,22,40,.6) 100%);\r\n    }\r\n    .sgk-play-btn {\r\n        position: relative;\r\n        width: 68px;\r\n        height: 68px;\r\n        border-radius: 50%;\r\n        background: rgba(184,155,94,.92);\r\n        color: var(--sgk-navy);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 22px;\r\n        padding-left: 3px;\r\n        box-shadow: 0 8px 28px rgba(184,155,94,.5);\r\n        transition: all .3s ease;\r\n    }\r\n    .sgk-play-btn::before,\r\n    .sgk-play-btn::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 50%; left: 50%;\r\n        transform: translate(-50%,-50%);\r\n        border-radius: 50%;\r\n        border: 2px solid rgba(184,155,94,.45);\r\n        width: 100%; height: 100%;\r\n        animation: sgkPulseRing 2.2s ease-out infinite;\r\n    }\r\n    .sgk-play-btn::after { animation-delay: 1.1s; }\r\n    .sgk-gallery-item:hover .sgk-play-btn {\r\n        background: var(--sgk-gold-bright);\r\n        transform: scale(1.12);\r\n        box-shadow: 0 14px 36px rgba(184,155,94,.65);\r\n    }\r\n\r\n    \/* \u2500\u2500 Caption \u2500\u2500 *\/\r\n    .sgk-item-caption {\r\n        padding: 20px 22px;\r\n        background: var(--sgk-white);\r\n    }\r\n    .sgk-item-caption h3 {\r\n        font-size: 22px;\r\n        color: var(--sgk-navy);\r\n        margin-bottom: 5px;\r\n    }\r\n    .sgk-item-caption p {\r\n        font-size: 13px;\r\n        color: var(--sgk-mid-gray);\r\n        line-height: 1.5;\r\n        margin-bottom: 12px;\r\n        font-family: 'Inter', sans-serif;\r\n    }\r\n    .sgk-item-meta {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n    }\r\n    .sgk-item-tag {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n        padding: 4px 11px;\r\n        font-size: 11px;\r\n        font-weight: 700;\r\n        color: var(--sgk-gold-deep);\r\n        background: rgba(184,155,94,.12);\r\n        border: 1px solid rgba(184,155,94,.28);\r\n        border-radius: 4px;\r\n        text-transform: uppercase;\r\n        letter-spacing: .5px;\r\n        font-family: 'Inter', sans-serif;\r\n    }\r\n    .sgk-item-tag i { font-size: 10px; }\r\n    .sgk-item-cta {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        font-size: 12px;\r\n        font-weight: 700;\r\n        color: var(--sgk-gold);\r\n        transition: gap .3s;\r\n        font-family: 'Inter', sans-serif;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n    .sgk-gallery-item:hover .sgk-item-cta { gap: 10px; }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       LIGHTBOX\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .sgk-lightbox {\r\n        display: none;\r\n        position: fixed;\r\n        inset: 0;\r\n        z-index: 9999;\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 20px;\r\n    }\r\n    .sgk-lightbox.sgk-open {\r\n        display: flex;\r\n        animation: sgkOverlayIn .3s ease;\r\n    }\r\n    .sgk-lb-backdrop {\r\n        position: absolute;\r\n        inset: 0;\r\n        background: rgba(10,22,40,.93);\r\n        backdrop-filter: blur(7px);\r\n        -webkit-backdrop-filter: blur(7px);\r\n        cursor: pointer;\r\n    }\r\n    .sgk-lb-box {\r\n        position: relative;\r\n        z-index: 2;\r\n        width: 100%;\r\n        max-width: 480px;\r\n        background: var(--sgk-navy-dark);\r\n        border-radius: 14px;\r\n        overflow: hidden;\r\n        border: 1px solid rgba(184,155,94,.28);\r\n        box-shadow: 0 50px 120px rgba(0,0,0,.7);\r\n        animation: sgkModalIn .35s cubic-bezier(.4,0,.2,1);\r\n    }\r\n    .sgk-lb-box::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0;\r\n        height: 3px;\r\n        background: linear-gradient(90deg,\r\n            var(--sgk-gold-deep), var(--sgk-gold-bright),\r\n            var(--sgk-gold-soft), var(--sgk-gold-bright), var(--sgk-gold-deep));\r\n        background-size: 200% auto;\r\n        animation: sgkBtnGoldFlow 4s linear infinite;\r\n        z-index: 5;\r\n    }\r\n    .sgk-lb-video-wrap {\r\n        position: relative;\r\n        width: 100%;\r\n        aspect-ratio: 16 \/ 9;\r\n        background: #000;\r\n    }\r\n    .sgk-lb-video-wrap video {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: contain;\r\n        display: block;\r\n    }\r\n\r\n    \/* prev \/ next *\/\r\n    .sgk-lb-nav {\r\n        position: fixed;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        width: 48px;\r\n        height: 48px;\r\n        border-radius: 50%;\r\n        background: rgba(184,155,94,.88);\r\n        color: var(--sgk-navy);\r\n        border: none;\r\n        cursor: pointer;\r\n        font-size: 18px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: all .3s ease;\r\n        z-index: 10000;\r\n        box-shadow: 0 4px 16px rgba(0,0,0,.4);\r\n    }\r\n    .sgk-lb-nav:hover {\r\n        background: var(--sgk-gold-bright);\r\n        transform: translateY(-50%) scale(1.1);\r\n    }\r\n    .sgk-lb-prev { left:  calc(50% - 280px); }\r\n    .sgk-lb-next { right: calc(50% - 280px); }\r\n\r\n    .sgk-lb-info {\r\n        padding: 20px 24px 22px;\r\n        display: flex;\r\n        align-items: flex-start;\r\n        justify-content: space-between;\r\n        gap: 16px;\r\n    }\r\n    .sgk-lb-title {\r\n        font-family: 'Cormorant Garamond', serif;\r\n        font-size: 22px;\r\n        font-weight: 700;\r\n        color: var(--sgk-cream);\r\n        margin-bottom: 5px;\r\n    }\r\n    .sgk-lb-desc {\r\n        font-family: 'Inter', sans-serif;\r\n        font-size: 13px;\r\n        color: rgba(245,241,232,.6);\r\n        line-height: 1.55;\r\n    }\r\n    .sgk-lb-close {\r\n        flex-shrink: 0;\r\n        width: 38px;\r\n        height: 38px;\r\n        border-radius: 50%;\r\n        border: 1px solid rgba(184,155,94,.4);\r\n        color: var(--sgk-gold);\r\n        background: transparent;\r\n        cursor: pointer;\r\n        font-size: 15px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: all .3s ease;\r\n        font-family: 'Inter', sans-serif;\r\n    }\r\n    .sgk-lb-close:hover {\r\n        background: var(--sgk-gold);\r\n        color: var(--sgk-navy);\r\n        transform: rotate(90deg);\r\n    }\r\n\r\n    \/* dot indicator *\/\r\n    .sgk-lb-dots {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 8px;\r\n        padding: 0 0 16px;\r\n    }\r\n    .sgk-lb-dot {\r\n        width: 7px;\r\n        height: 7px;\r\n        border-radius: 50%;\r\n        background: rgba(184,155,94,.3);\r\n        transition: all .3s ease;\r\n        cursor: pointer;\r\n    }\r\n    .sgk-lb-dot.sgk-active {\r\n        background: var(--sgk-gold);\r\n        transform: scale(1.3);\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       STATS + CTA\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .sgk-stats-strip {\r\n        background: linear-gradient(135deg, var(--sgk-navy) 0%, var(--sgk-black) 100%);\r\n        padding: 60px 20px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    .sgk-stats-strip::before {\r\n        content: '';\r\n        position: absolute;\r\n        inset: 0;\r\n        background: radial-gradient(circle at 50% 50%, rgba(184,155,94,.12) 0%, transparent 65%);\r\n        pointer-events: none;\r\n    }\r\n    .sgk-stats-inner {\r\n        max-width: 800px;\r\n        margin: 0 auto;\r\n        display: grid;\r\n        grid-template-columns: repeat(4, 1fr);\r\n        gap: 20px;\r\n        text-align: center;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n    @media (max-width: 600px) { .sgk-stats-inner { grid-template-columns: repeat(2,1fr); } }\r\n    .sgk-stat-number {\r\n        font-family: 'Cormorant Garamond', serif;\r\n        font-size: 44px;\r\n        font-weight: 700;\r\n        background: linear-gradient(90deg, var(--sgk-gold-deep), var(--sgk-gold-bright), var(--sgk-gold));\r\n        background-size: 200% auto;\r\n        -webkit-background-clip: text;\r\n        background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        animation: sgkGoldShimmer 5s linear infinite;\r\n        line-height: 1.1;\r\n        margin-bottom: 6px;\r\n    }\r\n    .sgk-stat-label {\r\n        font-family: 'Inter', sans-serif;\r\n        font-size: 13px;\r\n        color: rgba(245,241,232,.6);\r\n        font-weight: 500;\r\n    }\r\n\r\n    .sgk-cta-final {\r\n        padding: 80px 20px;\r\n        background: linear-gradient(135deg, var(--sgk-navy) 0%, var(--sgk-black) 100%);\r\n        text-align: center;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    .sgk-cta-final::before {\r\n        content: '';\r\n        position: absolute;\r\n        inset: 0;\r\n        background: radial-gradient(circle at 50% 50%, rgba(184,155,94,.15) 0%, transparent 60%);\r\n        pointer-events: none;\r\n    }\r\n    .sgk-cta-content {\r\n        position: relative;\r\n        z-index: 2;\r\n        max-width: 680px;\r\n        margin: 0 auto;\r\n    }\r\n    .sgk-cta-final h2 {\r\n        font-size: 42px;\r\n        color: var(--sgk-white);\r\n        margin-bottom: 14px;\r\n        line-height: 1.2;\r\n    }\r\n    .sgk-cta-final p {\r\n        font-family: 'Inter', sans-serif;\r\n        font-size: 16px;\r\n        color: rgba(245,241,232,.82);\r\n        margin-bottom: 30px;\r\n    }\r\n    .sgk-btn {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        padding: 14px 30px;\r\n        border-radius: 6px;\r\n        font-size: 14px;\r\n        font-weight: 700;\r\n        color: var(--sgk-navy);\r\n        border: 2px solid transparent;\r\n        cursor: pointer;\r\n        transition: all .3s ease;\r\n        letter-spacing: .5px;\r\n        position: relative;\r\n        overflow: hidden;\r\n        font-family: 'Inter', sans-serif;\r\n        text-decoration: none;\r\n        text-transform: uppercase;\r\n        background: linear-gradient(90deg,\r\n            var(--sgk-gold-deep), var(--sgk-gold), var(--sgk-gold-bright),\r\n            var(--sgk-gold-soft), var(--sgk-gold-bright), var(--sgk-gold), var(--sgk-gold-deep));\r\n        background-size: 300% auto;\r\n        animation: sgkBtnGoldFlow 5s linear infinite;\r\n    }\r\n    .sgk-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%;\r\n        width: 100%; height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);\r\n        transition: left .6s ease;\r\n    }\r\n    .sgk-btn:hover {\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 10px 25px rgba(184,155,94,.5);\r\n        color: var(--sgk-black);\r\n    }\r\n    .sgk-btn:hover::before { left: 100%; }\r\n\r\n    \/* \u2500\u2500 Responsive \u2500\u2500 *\/\r\n    @media (max-width: 768px) {\r\n        .sgk-gallery-hero   { padding: 70px 16px 50px; }\r\n        .sgk-gallery-hero h1 { font-size: 36px; }\r\n        .sgk-gallery-hero p  { font-size: 14.5px; }\r\n        .sgk-gallery-section,\r\n        .sgk-cta-final       { padding: 60px 16px; }\r\n        .sgk-section-title   { font-size: 30px; }\r\n        .sgk-cta-final h2    { font-size: 30px; }\r\n        .sgk-lb-prev, .sgk-lb-next { display: none; }\r\n        .sgk-lb-box { max-width: 95vw; }\r\n    }\r\n    @media (max-width: 480px) {\r\n        .sgk-gallery-hero h1 { font-size: 28px; }\r\n        .sgk-play-btn { width: 54px; height: 54px; font-size: 18px; }\r\n    }\r\n<\/style>\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HTML \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"sgk-gallery-page\">\r\n\r\n    <!-- \u2500\u2500\u2500 Hero \u2500\u2500\u2500 -->\r\n    <section class=\"sgk-gallery-hero\">\r\n        <div class=\"sgk-breadcrumb\">\r\n            <a href=\"https:\/\/alkaabiadvocate.com\/en\/\">Home<\/a>\r\n            <span class=\"sgk-breadcrumb-sep\">\u203a<\/span>\r\n            <span>Gallery<\/span>\r\n        <\/div>\r\n        <span class=\"sgk-eyebrow\">Gallery<\/span>\r\n        <h1>\r\n            Moments from\r\n            <span class=\"sgk-highlight\">Our Legal Journey<\/span>\r\n        <\/h1>\r\n        <p>\r\n            A window into our work \u2014 from legal awareness sessions and media appearances\r\n            to everyday moments inside Al Kaabi Advocates &amp; Legal Consultants.\r\n        <\/p>\r\n    <\/section>\r\n\r\n    <!-- \u2500\u2500\u2500 Gallery \u2500\u2500\u2500 -->\r\n    <section class=\"sgk-gallery-section\">\r\n        <div class=\"sgk-section-header sgk-fade-in\">\r\n            <span class=\"sgk-section-eyebrow\">Our Gallery<\/span>\r\n            <h2 class=\"sgk-section-title\">Watch Our Work &amp; Activities<\/h2>\r\n            <p class=\"sgk-section-subtitle\">\r\n                Click on any video to watch it in full.\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"sgk-gallery-grid\" id=\"sgkGrid\">\r\n\r\n            <!-- \u25bc Video 1 -->\r\n            <div class=\"sgk-gallery-item sgk-fade-in\"\r\n                 data-index=\"0\"\r\n                 data-title=\"A Glimpse of the Firm's Activity\"\r\n                 data-desc=\"A look at the work of Al Kaabi Advocates &amp; Legal Consultants.\"\r\n                 data-src=\"https:\/\/alkaabiadvocate.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-05-24-at-2.43.59-PM.mp4\">\r\n                <div class=\"sgk-item-thumb\">\r\n                    <video\r\n                        src=\"https:\/\/alkaabiadvocate.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-05-24-at-2.43.59-PM.mp4\"\r\n                        muted preload=\"metadata\" playsinline><\/video>\r\n                    <div class=\"sgk-play-overlay\">\r\n                        <div class=\"sgk-play-btn\"><i class=\"fa-solid fa-play\"><\/i><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"sgk-item-caption\">\r\n                    <h3>A Glimpse of the Firm's Activity<\/h3>\r\n                    <p>A look at the work of Al Kaabi Advocates<\/p>\r\n                    <div class=\"sgk-item-meta\">\r\n                        <span class=\"sgk-item-tag\"><i class=\"fa-solid fa-scale-balanced\"><\/i>The Firm<\/span>\r\n                        <span class=\"sgk-item-cta\">Watch <i class=\"fa-solid fa-arrow-right\"><\/i><\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- \u25bc Video 2 -->\r\n            <div class=\"sgk-gallery-item sgk-fade-in\"\r\n                 data-index=\"1\"\r\n                 data-title=\"Legal Awareness Clip\"\r\n                 data-desc=\"Awareness content from Al Kaabi Advocates &amp; Legal Consultants in the UAE.\"\r\n                 data-src=\"https:\/\/alkaabiadvocate.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-05-24-at-2.44.04-PM.mp4\">\r\n                <div class=\"sgk-item-thumb\">\r\n                    <video\r\n                        src=\"https:\/\/alkaabiadvocate.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Video-2026-05-24-at-2.44.04-PM.mp4\"\r\n                        muted preload=\"metadata\" playsinline><\/video>\r\n                    <div class=\"sgk-play-overlay\">\r\n                        <div class=\"sgk-play-btn\"><i class=\"fa-solid fa-play\"><\/i><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"sgk-item-caption\">\r\n                    <h3>Legal Awareness Clip<\/h3>\r\n                    <p>Educational content from Al Kaabi Advocates<\/p>\r\n                    <div class=\"sgk-item-meta\">\r\n                        <span class=\"sgk-item-tag\"><i class=\"fa-solid fa-bullhorn\"><\/i>Legal Awareness<\/span>\r\n                        <span class=\"sgk-item-cta\">Watch <i class=\"fa-solid fa-arrow-right\"><\/i><\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2500\u2500\u2500 Stats Strip \u2500\u2500\u2500 -->\r\n    <div class=\"sgk-stats-strip\">\r\n        <div class=\"sgk-stats-inner\">\r\n            <div class=\"sgk-stat-item sgk-fade-in\">\r\n                <div class=\"sgk-stat-number\">50+<\/div>\r\n                <div class=\"sgk-stat-label\">Videos Published<\/div>\r\n            <\/div>\r\n            <div class=\"sgk-stat-item sgk-fade-in\">\r\n                <div class=\"sgk-stat-number\">200K+<\/div>\r\n                <div class=\"sgk-stat-label\">Views Across Platforms<\/div>\r\n            <\/div>\r\n            <div class=\"sgk-stat-item sgk-fade-in\">\r\n                <div class=\"sgk-stat-number\">15+<\/div>\r\n                <div class=\"sgk-stat-label\">Media Appearances<\/div>\r\n            <\/div>\r\n            <div class=\"sgk-stat-item sgk-fade-in\">\r\n                <div class=\"sgk-stat-number\">30+<\/div>\r\n                <div class=\"sgk-stat-label\">Events &amp; Forums<\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2500\u2500\u2500 CTA \u2500\u2500\u2500 -->\r\n    <section class=\"sgk-cta-final\">\r\n        <div class=\"sgk-cta-content sgk-fade-in\">\r\n            <h2>Do You Have a Legal Inquiry?<\/h2>\r\n            <p>Our team is ready to answer all your questions \u2014 book your first consultation now.<\/p>\r\n            <a href=\"https:\/\/alkaabiadvocate.com\/en\/contact\/\" class=\"sgk-btn\">\r\n                <i class=\"fa-solid fa-calendar-check\"><\/i>\r\n                Book Consultation Now\r\n            <\/a>\r\n        <\/div>\r\n    <\/section>\r\n\r\n<\/div><!-- \/sgk-gallery-page -->\r\n\r\n\r\n<!-- \u2500\u2500\u2500 Lightbox \u2500\u2500\u2500 -->\r\n<div class=\"sgk-lightbox\" id=\"sgkLightbox\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Video player\">\r\n    <div class=\"sgk-lb-backdrop\" id=\"sgkLbBackdrop\"><\/div>\r\n\r\n    <button class=\"sgk-lb-nav sgk-lb-prev\" id=\"sgkLbPrev\" aria-label=\"Previous video\">\r\n        <i class=\"fa-solid fa-chevron-left\"><\/i>\r\n    <\/button>\r\n    <button class=\"sgk-lb-nav sgk-lb-next\" id=\"sgkLbNext\" aria-label=\"Next video\">\r\n        <i class=\"fa-solid fa-chevron-right\"><\/i>\r\n    <\/button>\r\n\r\n    <div class=\"sgk-lb-box\">\r\n        <div class=\"sgk-lb-video-wrap\">\r\n            <video id=\"sgkLbVideo\" controls preload=\"metadata\" playsinline><\/video>\r\n        <\/div>\r\n        <div class=\"sgk-lb-info\">\r\n            <div>\r\n                <div class=\"sgk-lb-title\" id=\"sgkLbTitle\"><\/div>\r\n                <div class=\"sgk-lb-desc\"  id=\"sgkLbDesc\"><\/div>\r\n            <\/div>\r\n            <button class=\"sgk-lb-close\" id=\"sgkLbClose\" aria-label=\"Close\">\r\n                <i class=\"fa-solid fa-xmark\"><\/i>\r\n            <\/button>\r\n        <\/div>\r\n        <div class=\"sgk-lb-dots\" id=\"sgkLbDots\"><\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 JavaScript \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script>\r\n(function () {\r\n    'use strict';\r\n\r\n    \/* \u2500\u2500 Fade-in observer \u2500\u2500 *\/\r\n    var fadeEls = document.querySelectorAll('.sgk-fade-in');\r\n    if ('IntersectionObserver' in window) {\r\n        var obs = new IntersectionObserver(function (entries) {\r\n            entries.forEach(function (e) {\r\n                if (e.isIntersecting) {\r\n                    e.target.classList.add('sgk-visible');\r\n                    obs.unobserve(e.target);\r\n                }\r\n            });\r\n        }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\r\n        fadeEls.forEach(function (el) { obs.observe(el); });\r\n    } else {\r\n        fadeEls.forEach(function (el) { el.classList.add('sgk-visible'); });\r\n    }\r\n\r\n    \/* \u2500\u2500 Stagger grid items \u2500\u2500 *\/\r\n    var items = Array.from(document.querySelectorAll('#sgkGrid .sgk-gallery-item'));\r\n    items.forEach(function (item, i) {\r\n        item.style.animationDelay = (i * 0.12) + 's';\r\n    });\r\n\r\n    \/* \u2500\u2500 Lightbox \u2500\u2500 *\/\r\n    var lightbox = document.getElementById('sgkLightbox');\r\n    var lbVideo  = document.getElementById('sgkLbVideo');\r\n    var lbTitle  = document.getElementById('sgkLbTitle');\r\n    var lbDesc   = document.getElementById('sgkLbDesc');\r\n    var lbClose  = document.getElementById('sgkLbClose');\r\n    var lbBack   = document.getElementById('sgkLbBackdrop');\r\n    var lbPrev   = document.getElementById('sgkLbPrev');\r\n    var lbNext   = document.getElementById('sgkLbNext');\r\n    var lbDots   = document.getElementById('sgkLbDots');\r\n\r\n    var currentIndex = 0;\r\n\r\n    function buildDots() {\r\n        lbDots.innerHTML = '';\r\n        items.forEach(function (_, i) {\r\n            var dot = document.createElement('div');\r\n            dot.className = 'sgk-lb-dot' + (i === currentIndex ? ' sgk-active' : '');\r\n            dot.addEventListener('click', function () { loadItem(i); });\r\n            lbDots.appendChild(dot);\r\n        });\r\n    }\r\n\r\n    function updateDots() {\r\n        var dots = lbDots.querySelectorAll('.sgk-lb-dot');\r\n        dots.forEach(function (d, i) {\r\n            d.classList.toggle('sgk-active', i === currentIndex);\r\n        });\r\n    }\r\n\r\n    function loadItem(index) {\r\n        currentIndex = (index + items.length) % items.length;\r\n        var item = items[currentIndex];\r\n        lbVideo.src = item.dataset.src;\r\n        lbTitle.textContent = item.dataset.title;\r\n        lbDesc.textContent  = item.dataset.desc;\r\n        lbVideo.play();\r\n        updateDots();\r\n    }\r\n\r\n    function openLightbox(index) {\r\n        currentIndex = index;\r\n        buildDots();\r\n        lbVideo.src = items[currentIndex].dataset.src;\r\n        lbTitle.textContent = items[currentIndex].dataset.title;\r\n        lbDesc.textContent  = items[currentIndex].dataset.desc;\r\n        lightbox.classList.add('sgk-open');\r\n        document.body.style.overflow = 'hidden';\r\n        lbVideo.play();\r\n        var show = items.length > 1;\r\n        lbPrev.style.visibility = show ? 'visible' : 'hidden';\r\n        lbNext.style.visibility = show ? 'visible' : 'hidden';\r\n    }\r\n\r\n    function closeLightbox() {\r\n        lbVideo.pause();\r\n        lbVideo.src = '';\r\n        lightbox.classList.remove('sgk-open');\r\n        document.body.style.overflow = '';\r\n    }\r\n\r\n    items.forEach(function (item, i) {\r\n        item.addEventListener('click', function () { openLightbox(i); });\r\n    });\r\n\r\n    lbClose.addEventListener('click', closeLightbox);\r\n    lbBack.addEventListener('click',  closeLightbox);\r\n    lbPrev.addEventListener('click',  function () { loadItem(currentIndex - 1); });\r\n    lbNext.addEventListener('click',  function () { loadItem(currentIndex + 1); });\r\n\r\n    \/* keyboard \u2014 LTR direction *\/\r\n    document.addEventListener('keydown', function (e) {\r\n        if (!lightbox.classList.contains('sgk-open')) return;\r\n        if (e.key === 'Escape')     closeLightbox();\r\n        if (e.key === 'ArrowLeft')  loadItem(currentIndex - 1);\r\n        if (e.key === 'ArrowRight') loadItem(currentIndex + 1);\r\n    });\r\n\r\n    \/* hover preview *\/\r\n    items.forEach(function (item) {\r\n        var vid = item.querySelector('video');\r\n        if (!vid) return;\r\n        item.addEventListener('mouseenter', function () {\r\n            vid.currentTime = 0;\r\n            vid.play().catch(function () {});\r\n        });\r\n        item.addEventListener('mouseleave', function () {\r\n            vid.pause();\r\n            vid.currentTime = 0;\r\n        });\r\n    });\r\n\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Home \u203a Gallery Gallery Moments from Our Legal Journey A window into our work \u2014 from legal awareness sessions and media appearances to everyday moments inside Al Kaabi Advocates &amp; Legal Consultants. Our Gallery Watch Our Work &amp; Activities Click on any video to watch it in full. A Glimpse of the Firm&#8217;s Activity A [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-284","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/alkaabiadvocate.com\/index.php?rest_route=\/wp\/v2\/pages\/284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alkaabiadvocate.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alkaabiadvocate.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alkaabiadvocate.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alkaabiadvocate.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=284"}],"version-history":[{"count":4,"href":"https:\/\/alkaabiadvocate.com\/index.php?rest_route=\/wp\/v2\/pages\/284\/revisions"}],"predecessor-version":[{"id":289,"href":"https:\/\/alkaabiadvocate.com\/index.php?rest_route=\/wp\/v2\/pages\/284\/revisions\/289"}],"wp:attachment":[{"href":"https:\/\/alkaabiadvocate.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}