{"id":2339,"date":"2025-10-17T14:28:24","date_gmt":"2025-10-17T11:28:24","guid":{"rendered":"https:\/\/www.mada-alhadithah.com.sa\/?page_id=2339"},"modified":"2026-02-07T14:45:07","modified_gmt":"2026-02-07T11:45:07","slug":"trademarks","status":"publish","type":"page","link":"https:\/\/www.mada-alhadithah.com.sa\/en\/trademarks\/","title":{"rendered":"Brands"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2339\" class=\"elementor elementor-2339\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a0f7333 e-con-full e-flex e-con e-parent\" data-id=\"a0f7333\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f03f7b9 elementor-widget elementor-widget-html\" data-id=\"f03f7b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* --- THEME VARIABLES --- *\/\r\n    :root {\r\n        --color-dark: #064E3B;      \r\n        --color-gold: #D4AF37;      \r\n        --color-white: #ffffff;\r\n        --overlay-color: rgba(6, 78, 59, 0.85);\r\n    }\r\n\r\n    \/* Force LTR (Left to Right) *\/\r\n    .dynamic-page-header-wrapper {\r\n        direction: ltr !important;\r\n        text-align: left;\r\n        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;\r\n    }\r\n\r\n    body { margin: 0; }\r\n\r\n    \/* --- PAGE HEADER STYLES --- *\/\r\n    .dynamic-page-header {\r\n        position: relative;\r\n        height: 450px; \r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: flex-start; \r\n        padding-top: 180px; \r\n        text-align: center;\r\n        background-color: var(--color-dark);\r\n        background-image: url('https:\/\/www.mada-alhadithah.com.sa\/wp-content\/uploads\/2024\/04\/banner.jpg');\r\n        background-size: cover;\r\n        background-position: center;\r\n        background-attachment: fixed;\r\n        box-sizing: border-box;\r\n        direction: ltr !important;\r\n    }\r\n\r\n    \/* Dark Overlay *\/\r\n    .dynamic-page-header::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 100%;\r\n        background: var(--overlay-color);\r\n        z-index: 1;\r\n    }\r\n\r\n    .header-content {\r\n        position: relative;\r\n        z-index: 2;\r\n        width: 100%;\r\n        max-width: 800px;\r\n        padding: 0 20px;\r\n        animation: slideDown 1s ease-out;\r\n        text-align: center !important; \r\n    }\r\n\r\n    \/* --- TITLE STYLING --- *\/\r\n    .page-title {\r\n        color: var(--color-white);\r\n        font-size: 3.5rem; \r\n        font-weight: 800;\r\n        margin: 0;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        text-shadow: 0 4px 15px rgba(0,0,0,0.3);\r\n    }\r\n\r\n    \/* Gold Divider *\/\r\n    .title-divider {\r\n        width: 80px; height: 4px;\r\n        background-color: var(--color-gold);\r\n        margin: 20px auto 25px auto; \r\n        border-radius: 2px;\r\n    }\r\n\r\n    \/* --- BREADCRUMB STYLING --- *\/\r\n    .breadcrumb-nav {\r\n        display: inline-block;\r\n        background: rgba(255, 255, 255, 0.1);\r\n        backdrop-filter: blur(5px);\r\n        padding: 10px 30px;\r\n        border-radius: 50px;\r\n        border: 1px solid rgba(255, 255, 255, 0.2);\r\n    }\r\n\r\n    .breadcrumb-list {\r\n        list-style: none; padding: 0; margin: 0;\r\n        display: flex; align-items: center; justify-content: center;\r\n        font-size: 1rem; font-weight: 500;\r\n        text-transform: uppercase; letter-spacing: 1px;\r\n        direction: ltr !important; \r\n    }\r\n\r\n    .breadcrumb-item {\r\n        color: rgba(255, 255, 255, 0.8);\r\n        display: flex; align-items: center;\r\n    }\r\n    .breadcrumb-item a {\r\n        color: var(--color-white); text-decoration: none; transition: color 0.3s;\r\n    }\r\n    .breadcrumb-item a:hover { color: var(--color-gold); }\r\n\r\n    .breadcrumb-item:not(:last-child)::after {\r\n        content: '\/'; margin: 0 15px; color: var(--color-gold); font-weight: bold;\r\n    }\r\n    .breadcrumb-item.active { color: var(--color-gold); pointer-events: none; }\r\n\r\n    @keyframes slideDown {\r\n        from { opacity: 0; transform: translateY(-30px); }\r\n        to { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    \/* Mobile Responsive *\/\r\n    @media (max-width: 768px) {\r\n        .dynamic-page-header { height: 350px; padding-top: 140px; }\r\n        .page-title { font-size: 2rem; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"dynamic-page-header-wrapper\">\r\n    <header class=\"dynamic-page-header\">\r\n        <div class=\"header-content\">\r\n            <h1 class=\"page-title\" id=\"dynamicTitle\">Loading...<\/h1>\r\n            <div class=\"title-divider\"><\/div>\r\n            <nav class=\"breadcrumb-nav\">\r\n                <ol class=\"breadcrumb-list\" id=\"dynamicBreadcrumb\"><\/ol>\r\n            <\/nav>\r\n        <\/div>\r\n    <\/header>\r\n<\/div>\r\n    \r\n<script>\r\n    document.addEventListener(\"DOMContentLoaded\", function() {\r\n        \/\/ 1. Browser Title Utthao\r\n        let fullTitle = document.title; \r\n        \/\/ Example: \"Contact Us \u2013 \u0645\u0624\u0633\u0633\u0629 \u0645\u062f\u0649 \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u0644\u0644\u062a\u062c\u0627\u0631\u0629\"\r\n\r\n        \/\/ 2. Safai Karo (Cleaning Logic)\r\n        \/\/ Check for \"\u2013\" (En Dash - jo aapke title me hai)\r\n        if (fullTitle.includes('\u2013')) {\r\n            fullTitle = fullTitle.split('\u2013')[0]; \/\/ Dash ke pehle wala hissa le lo\r\n        } \r\n        \/\/ Check for \"-\" (Hyphen - just in case)\r\n        else if (fullTitle.includes('-')) {\r\n            fullTitle = fullTitle.split('-')[0];\r\n        }\r\n        \/\/ Check for \"|\" (Pipe)\r\n        else if (fullTitle.includes('|')) {\r\n            fullTitle = fullTitle.split('|')[0];\r\n        }\r\n\r\n        \/\/ Extra space hatao (Trim)\r\n        let cleanTitle = fullTitle.trim();\r\n\r\n        \/\/ 3. Title Set Karo\r\n        const titleElement = document.getElementById('dynamicTitle');\r\n        if(titleElement) titleElement.textContent = cleanTitle;\r\n\r\n        \/\/ 4. Breadcrumb Set Karo\r\n        const breadcrumbList = document.getElementById('dynamicBreadcrumb');\r\n        const breadcrumbHTML = `\r\n            <li class=\"breadcrumb-item\"><a href=\"\/\">Home<\/a><\/li>\r\n            <li class=\"breadcrumb-item active\">${cleanTitle}<\/li>\r\n        `;\r\n        if(breadcrumbList) breadcrumbList.innerHTML = breadcrumbHTML;\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f9b51ab e-con-full e-flex e-con e-parent\" data-id=\"f9b51ab\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a7f80a elementor-widget elementor-widget-html\" data-id=\"0a7f80a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@600;700&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n    \/* --- VARIABLES --- *\/\r\n    :root {\r\n        --bg-body: #f8f9fa;\r\n        --card-bg: #ffffff;\r\n        --brand-green: #0b3d2e; \r\n        --brand-gold: #c6a87c;\r\n        --shadow-soft: 0 10px 40px rgba(0,0,0,0.06);\r\n        --shadow-hover: 0 20px 50px rgba(11, 61, 46, 0.15);\r\n    }\r\n\r\n    body { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--bg-body); }\r\n\r\n    \/* --- SECTION --- *\/\r\n    #masonry-section { padding: 80px 20px 60px; text-align: center; }\r\n    \r\n    .heading-box { margin-bottom: 50px; }\r\n\r\n    .main-heading {\r\n        font-family: 'Playfair Display', serif;\r\n        color: var(--brand-green);\r\n        font-size: 3rem; margin: 0; font-weight: 700;\r\n    }\r\n\r\n    .sub-heading {\r\n        display: block; \r\n        color: var(--brand-gold);\r\n        font-size: 1.1rem; \r\n        margin-top: 15px; \r\n        font-style: italic;\r\n        font-family: 'Playfair Display', serif;\r\n    }\r\n\r\n    \/* --- GRID (UPDATED TO 3 COLUMNS) --- *\/\r\n    .masonry-grid {\r\n        column-count: 3; \/* \u092f\u0939\u093e\u0901 3 \u0915\u0949\u0932\u092e \u0938\u0947\u091f \u0915\u093f\u092f\u093e \u0939\u0948 *\/\r\n        column-gap: 30px;\r\n        max-width: 1200px; \/* Width \u0925\u094b\u0921\u093c\u093e \u0915\u092e \u0915\u093f\u092f\u093e \u0924\u093e\u0915\u093f 3 \u092c\u0949\u0915\u094d\u0938 \u0905\u091a\u094d\u091b\u0947 \u0926\u093f\u0916\u0947\u0902 *\/\r\n        margin: 0 auto; padding: 0 20px;\r\n    }\r\n\r\n    \/* --- CARD --- *\/\r\n    .masonry-item {\r\n        break-inside: avoid; margin-bottom: 30px;\r\n        background: var(--card-bg); border-radius: 16px;\r\n        overflow: hidden; position: relative; cursor: pointer;\r\n        transition: all 0.4s ease;\r\n        box-shadow: var(--shadow-soft);\r\n        border: 1px solid rgba(0,0,0,0.04);\r\n    }\r\n\r\n    .masonry-item:hover {\r\n        transform: translateY(-8px);\r\n        box-shadow: var(--shadow-hover);\r\n        border-color: rgba(198, 168, 124, 0.4);\r\n    }\r\n\r\n    \/* --- IMAGE AREA --- *\/\r\n    .img-container {\r\n        position: relative;\r\n        overflow: hidden;\r\n        background: radial-gradient(circle at center, #ffffff 40%, #f9f9f9 100%);\r\n        padding: 20px;\r\n        min-height: 150px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    .masonry-item img {\r\n        width: 100%; \r\n        height: auto; \r\n        display: block;\r\n        transition: transform 0.6s ease;\r\n        mix-blend-mode: normal; \r\n    }\r\n\r\n    .masonry-item:hover img { transform: scale(1.08); }\r\n\r\n    \/* --- QUICK VIEW BUTTON --- *\/\r\n    .quick-view-btn {\r\n        position: absolute;\r\n        bottom: -50px; \r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        \r\n        display: flex; align-items: center; gap: 8px;\r\n        padding: 10px 24px;\r\n        width: max-content;\r\n        \r\n        background: rgba(11, 61, 46, 0.95);\r\n        color: #fff;\r\n        backdrop-filter: blur(4px);\r\n        border-radius: 30px;\r\n        \r\n        font-size: 0.8rem; font-weight: 600;\r\n        text-transform: uppercase; letter-spacing: 1px;\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.2);\r\n        \r\n        transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        z-index: 10;\r\n    }\r\n\r\n    .masonry-item:hover .quick-view-btn { bottom: 20px; }\r\n\r\n    .quick-view-btn:hover { background: var(--brand-gold); color: #000; }\r\n\r\n    \/* --- BADGES --- *\/\r\n    .prod-badge {\r\n        position: absolute; top: 15px; left: 15px;\r\n        background: var(--brand-green); color: #fff;\r\n        font-size: 10px; font-weight: 700; text-transform: uppercase;\r\n        padding: 6px 12px; border-radius: 4px; letter-spacing: 1px; z-index: 2;\r\n    }\r\n    \r\n    .badge-gray { background: #555; }\r\n    .badge-gold { background: var(--brand-gold); color: #000; }\r\n\r\n    \/* --- INFO AREA --- *\/\r\n    .item-info {\r\n        padding: 20px 25px; background: #fff; text-align: center;\r\n        position: relative; z-index: 5;\r\n    }\r\n\r\n    .item-tag {\r\n        display: block; color: var(--brand-gold);\r\n        font-size: 0.75rem; text-transform: uppercase;\r\n        font-weight: 700; letter-spacing: 1.5px; margin-bottom: 6px;\r\n    }\r\n\r\n    .item-title {\r\n        color: var(--brand-green);\r\n        font-family: 'Playfair Display', serif;\r\n        font-weight: 700; font-size: 1.2rem; margin: 0;\r\n        line-height: 1.3;\r\n    }\r\n\r\n    \/* --- LIGHTBOX --- *\/\r\n    #lightbox {\r\n        display: none; position: fixed; z-index: 9999;\r\n        left: 0; top: 0; width: 100%; height: 100%;\r\n        background: rgba(11, 61, 46, 0.9); backdrop-filter: blur(5px);\r\n        justify-content: center; align-items: center;\r\n        opacity: 0; transition: opacity 0.4s ease;\r\n    }\r\n    #lightbox.active { display: flex; opacity: 1; }\r\n    #lightbox img {\r\n        max-width: 85%; max-height: 85vh; border-radius: 8px;\r\n        box-shadow: 0 20px 60px rgba(0,0,0,0.5);\r\n        transform: scale(0.95); transition: transform 0.4s ease;\r\n    }\r\n    #lightbox.active img { transform: scale(1); }\r\n    #close-icon {\r\n        position: absolute; top: 30px; right: 40px;\r\n        color: #fff; font-size: 35px; cursor: pointer; transition: 0.3s;\r\n    }\r\n    #close-icon:hover { color: var(--brand-gold); transform: rotate(90deg); }\r\n\r\n    \/* --- RESPONSIVE (Mobile ke liye) --- *\/\r\n    @media (max-width: 1024px) { .masonry-grid { column-count: 3; } }\r\n    @media (max-width: 768px) { .masonry-grid { column-count: 1; padding: 0 10px; } }\r\n\r\n<\/style>\r\n\r\n<section id=\"masonry-section\">\r\n    <div class=\"heading-box\">\r\n        <h2 class=\"main-heading\">Our Brands<\/h2>\r\n        <span class=\"sub-heading\">Featured Partners<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"masonry-grid\">\r\n\r\n        <div class=\"masonry-item\" onclick=\"openLightbox('https:\/\/www.mada-alhadithah.com.sa\/wp-content\/uploads\/2025\/10\/prismlogo.png')\">\r\n            <span class=\"prod-badge badge-gold\">Featured<\/span>\r\n            <div class=\"img-container\">\r\n                <img decoding=\"async\" src=\"https:\/\/www.mada-alhadithah.com.sa\/wp-content\/uploads\/2025\/10\/prismlogo.png\" alt=\"Prism Logo\">\r\n                <div class=\"quick-view-btn\">Quick View <i class=\"fas fa-eye\"><\/i><\/div>\r\n            <\/div>\r\n            <div class=\"item-info\">\r\n                <span class=\"item-tag\">Brand<\/span>\r\n                <h3 class=\"item-title\">Prism<\/h3>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"masonry-item\" onclick=\"openLightbox('https:\/\/www.mada-alhadithah.com.sa\/wp-content\/uploads\/2025\/10\/alyasunlogo.png')\">\r\n            <span class=\"prod-badge\">Partner<\/span>\r\n            <div class=\"img-container\">\r\n                <img decoding=\"async\" src=\"https:\/\/www.mada-alhadithah.com.sa\/wp-content\/uploads\/2025\/10\/alyasunlogo.png\" alt=\"Alyasun Logo\">\r\n                <div class=\"quick-view-btn\">Quick View <i class=\"fas fa-eye\"><\/i><\/div>\r\n            <\/div>\r\n            <div class=\"item-info\">\r\n                <span class=\"item-tag\">Company<\/span>\r\n                <h3 class=\"item-title\">Alyasun<\/h3>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"masonry-item\" onclick=\"openLightbox('https:\/\/www.mada-alhadithah.com.sa\/wp-content\/uploads\/2025\/10\/madcoflogo.png')\">\r\n            <div class=\"img-container\">\r\n                <img decoding=\"async\" src=\"https:\/\/www.mada-alhadithah.com.sa\/wp-content\/uploads\/2025\/10\/madcoflogo.png\" alt=\"Madcof Logo\">\r\n                <div class=\"quick-view-btn\">Quick View <i class=\"fas fa-eye\"><\/i><\/div>\r\n            <\/div>\r\n            <div class=\"item-info\">\r\n                <span class=\"item-tag\">Strategic<\/span>\r\n                <h3 class=\"item-title\">Madcof<\/h3>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<div id=\"lightbox\" onclick=\"closeLightbox(event)\">\r\n    <span id=\"close-icon\">&times;<\/span>\r\n    <img decoding=\"async\" id=\"lb-image\" src=\"\" alt=\"Zoom\">\r\n<\/div>\r\n\r\n<script>\r\n    const lb = document.getElementById('lightbox');\r\n    const lbImg = document.getElementById('lb-image');\r\n\r\n    function openLightbox(url) {\r\n        lbImg.src = url;\r\n        lb.classList.add('active');\r\n        document.body.style.overflow = 'hidden'; \r\n    }\r\n\r\n    function closeLightbox(e) {\r\n        if(e.target !== lbImg) {\r\n            lb.classList.remove('active');\r\n            document.body.style.overflow = 'auto'; \r\n            setTimeout(()=> lbImg.src='', 400);\r\n        }\r\n    }\r\n<\/script>\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>Loading&#8230; Our Brands Featured Partners Featured Quick View Brand Prism Partner Quick View Company Alyasun Quick View Strategic Madcof &times;<\/p>","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-2339","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.mada-alhadithah.com.sa\/en\/wp-json\/wp\/v2\/pages\/2339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mada-alhadithah.com.sa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mada-alhadithah.com.sa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mada-alhadithah.com.sa\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mada-alhadithah.com.sa\/en\/wp-json\/wp\/v2\/comments?post=2339"}],"version-history":[{"count":0,"href":"https:\/\/www.mada-alhadithah.com.sa\/en\/wp-json\/wp\/v2\/pages\/2339\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.mada-alhadithah.com.sa\/en\/wp-json\/wp\/v2\/media?parent=2339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}