{"id":22495,"date":"2026-07-14T09:10:26","date_gmt":"2026-07-14T09:10:26","guid":{"rendered":"https:\/\/sampleprojects.in\/interior\/?page_id=22495"},"modified":"2026-09-07T12:28:03","modified_gmt":"2026-09-07T12:28:03","slug":"brand-associations","status":"publish","type":"page","link":"https:\/\/sampleprojects.in\/interior\/brand-associations\/","title":{"rendered":"Brand Associations"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"22495\" class=\"elementor elementor-22495\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1092ba3 elementor-section-full_width elementor-section-stretched elementor-section-height-min-height elementor-section-height-default elementor-section-items-middle\" data-id=\"1092ba3\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d0bb52b\" data-id=\"d0bb52b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-919221e elementor-widget elementor-widget-heading\" data-id=\"919221e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Brand Associations<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9b82457 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9b82457\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-260b875\" data-id=\"260b875\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1c705a6 elementor-widget elementor-widget-html\" data-id=\"1c705a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Font Awesome CDN (Icons ke liye) -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n<!-- Google Fonts - Montserrat -->\r\n<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=Montserrat:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    \/* Montserrat Font Scope - Icons ko chhod kar baaki sab par font lagaya hai *\/\r\n    .marketing-container,\r\n    .marketing-container h1,\r\n    .marketing-container h2,\r\n    .marketing-container h3,\r\n    .marketing-container p,\r\n    .marketing-container div,\r\n    .marketing-container span {\r\n        font-family: 'Montserrat', sans-serif;\r\n    }\r\n\r\n    \/* Font Awesome Fix - Icons par Montserrat override na ho *\/\r\n    .marketing-container i.fa, \r\n    .marketing-container i.fas, \r\n    .marketing-container i.far, \r\n    .marketing-container i.fal, \r\n    .marketing-container i.fab,\r\n    .marketing-container .fa,\r\n    .marketing-container .fas,\r\n    .marketing-container .far,\r\n    .marketing-container .fab {\r\n        font-family: \"Font Awesome 6 Free\", \"Font Awesome 5 Free\", \"FontAwesome\" !important;\r\n        font-weight: 900;\r\n    }\r\n\r\n    .marketing-container {\r\n        max-width: 1240px;\r\n        width: 100%;\r\n        margin: 0 auto;\r\n        perspective: 1000px; \/* Activates 3D space *\/\r\n    }\r\n\r\n    \/* Typography Wrapper *\/\r\n    .header-wrap {\r\n        text-align: center;\r\n        max-width: 850px;\r\n        margin: 0 auto 60px auto;\r\n    }\r\n\r\n    .main-title {\r\n        font-size: 38px !important;\r\n        font-weight: 700 !important;\r\n        color: #1e293b;\r\n        margin-bottom: 20px;\r\n        letter-spacing: -0.5px;\r\n        line-height: 1.2;\r\n    }\r\n\r\n    .main-title::after {\r\n        content: '';\r\n        display: block;\r\n        width: 80px;\r\n        height: 4px;\r\n        background: #000000;\r\n        margin: 12px auto 0 auto;\r\n        border-radius: 2px;\r\n    }\r\n\r\n    .sub-desc {\r\n        font-size: 15px;\r\n        color: #000000;\r\n        line-height: 1.7;\r\n        font-weight: 400;\r\n    }\r\n\r\n    \/* 3D Grid Workspace - 6 columns matching original layout *\/\r\n    .brand-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(6, 1fr);\r\n        gap: 20px;\r\n    }\r\n\r\n    \/* Premium 3D Logo Tile Canvas *\/\r\n    .brand-tile {\r\n        background: #ffffff;\r\n        border: 1px solid rgba(0, 0, 0, 0.05);\r\n        border-radius: 12px;\r\n        height: 140px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 20px;\r\n        position: relative;\r\n        transform-style: preserve-3d;\r\n        transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease-out;\r\n        cursor: pointer;\r\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);\r\n    }\r\n\r\n    \/* Mouse Tracking Subtle Spotlight Effect *\/\r\n    .spotlight-layer {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        background: radial-gradient(circle 100px at var(--x, 0px) var(--y, 0px), rgba(44, 70, 157, 0.06), transparent 80%);\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n        pointer-events: none;\r\n        border-radius: 12px;\r\n    }\r\n\r\n    .brand-tile:hover .spotlight-layer {\r\n        opacity: 1;\r\n    }\r\n\r\n    .brand-tile:hover {\r\n        border-color: rgba(44, 70, 157, 0.15);\r\n        box-shadow: 0 15px 35px rgba(44, 70, 157, 0.08);\r\n    }\r\n\r\n    \/* Logo Wrap Pushed to 3D Plane *\/\r\n    .logo-inner {\r\n        width: 100%;\r\n        height: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transform: translateZ(30px); \/* Extrudes logo slightly forward *\/\r\n        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n    }\r\n\r\n    .brand-tile:hover .logo-inner {\r\n        transform: translateZ(50px) scale(1.03);\r\n    }\r\n\r\n    .brand-tile:hover .logo-inner img {\r\n        filter: grayscale(0%) opacity(100%); \/* Full vivid color state on hover *\/\r\n    }\r\n\r\n    \/* Responsive Breakpoints *\/\r\n    @media (max-width: 1100px) {\r\n        .brand-grid {\r\n            grid-template-columns: repeat(4, 1fr);\r\n        }\r\n        .main-title {\r\n            font-size: 36px !important;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .brand-grid {\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 15px;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .brand-grid {\r\n            grid-template-columns: repeat(2, 1fr);\r\n        }\r\n        .main-title {\r\n            font-size: 22px !important;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"marketing-container\">\r\n    <!-- Header Section with exact text content -->\r\n    <div class=\"header-wrap\">\r\n        <h1 class=\"main-title\"> BRAND ASSOCIATIONS <\/h1>\r\n    <\/div>\r\n\r\n    <!-- 3D Brand Grid Canvas -->\r\n    <div class=\"brand-grid\">\r\n\r\n        <!-- Card 1 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/02-1.jpeg\" alt=\"Ash Coating\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 2 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/03-1.jpeg\" alt=\"Venom Motorsports\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 3 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/04-1.jpeg\" alt=\"Fomat Medical\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 4 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/06-1.jpeg\" alt=\"Used Mobiles\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 5 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/07-1.jpeg\" alt=\"Excellent Publicity\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 6 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/08-1.jpeg\" alt=\"Chokhi Dhani\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 7 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/09-1.jpeg\" alt=\"Flight Desk\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 8 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/10-1.jpeg\" alt=\"Xorolife Insurance\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 9 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/11-1.jpeg\" alt=\"NY Travel Limo\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 10 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/12-1.jpeg\" alt=\"Infinity Collection\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 11 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/13-1.jpeg\" alt=\"Cryptomarketing Digital\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 12 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/19-1.jpeg\" alt=\"Grand Gateway Hotel\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 13 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/14-1.jpeg\" alt=\"Cryptocurrency Insurance\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 14 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/15-1.jpeg\" alt=\"Unify Healthcare\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 15 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/16-1.jpeg\" alt=\"BuyUcoin\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 16 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/17-1.jpeg\" alt=\"Ontime\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 17 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/18-1.jpeg\" alt=\"Shiva Polymer\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 18 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/20-1.jpeg\" alt=\"Royez Immigration\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Card 19 -->\r\n        <div class=\"brand-tile\">\r\n            <div class=\"spotlight-layer\"><\/div>\r\n            <div class=\"logo-inner\">\r\n                <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-14-at-14.43.58.jpeg\" alt=\"Royez Immigration\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Mouse Tracking Engine for 3D Tile Transforms -->\r\n<script>\r\n    const tiles = document.querySelectorAll('.brand-tile');\r\n\r\n    tiles.forEach(tile => {\r\n        tile.addEventListener('mousemove', (e) => {\r\n            const rect = tile.getBoundingClientRect();\r\n            \r\n            const x = e.clientX - rect.left;\r\n            const y = e.clientY - rect.top;\r\n\r\n            tile.style.setProperty('--x', `${x}px`);\r\n            tile.style.setProperty('--y', `${y}px`);\r\n\r\n            const centerX = rect.width \/ 2;\r\n            const centerY = rect.height \/ 2;\r\n            \r\n            const rotateX = ((y - centerY) \/ centerY) * -12; \r\n            const rotateY = ((x - centerX) \/ centerX) * 12;\r\n\r\n            tile.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\r\n        });\r\n\r\n        tile.addEventListener('mouseleave', () => {\r\n            tile.style.transform = 'rotateX(0deg) rotateY(0deg)';\r\n        });\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3a8cb98 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3a8cb98\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-94587c4\" data-id=\"94587c4\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-914dfbd elementor-widget elementor-widget-html\" data-id=\"914dfbd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Smart Marketing Clients Grid<\/title>\r\n    \r\n    <!-- Google Fonts - Poppins (Loaded correctly) -->\r\n    <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=Poppins:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n    <style>\r\n\r\n\r\n        .marketing-container {\r\n            max-width: 1240px;\r\n            width: 100%;\r\n            margin: 0 auto;\r\n            perspective: 1000px; \/* Activates 3D space *\/\r\n        }\r\n\r\n        \/* Typography Wrapper *\/\r\n        .header-wrap {\r\n            text-align: center;\r\n            max-width: 850px;\r\n            margin: 0 auto 60px auto;\r\n        }\r\n\r\n        .main-title {\r\n            font-size: 35px;\r\n            font-weight: 500;\r\n            color: #1e293b; \/* Premium slate color *\/\r\n            margin-bottom: 20px;\r\n            letter-spacing: -0.5px;\r\n            line-height: 1.2;\r\n            font-family:poppins;\r\n        }\r\n\r\n  .sub-desc {\r\n    font-size: 15px;\r\n    color: #000000;\r\n    line-height: 1.7;\r\n    font-weight: 400;\r\n \r\n}\r\n\r\n        \/* 3D Grid Workspace - 6 columns matching original layout *\/\r\n        .brand-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(6, 1fr);\r\n            gap: 20px;\r\n        }\r\n\r\n        \/* Premium 3D Logo Tile Canvas *\/\r\n        .brand-tile {\r\n            background: #ffffff;\r\n            border: 1px solid rgba(0, 0, 0, 0.05);\r\n            border-radius: 12px;\r\n            height: 140px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            padding: 20px;\r\n            position: relative;\r\n            transform-style: preserve-3d;\r\n            transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease-out;\r\n            cursor: pointer;\r\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);\r\n        }\r\n\r\n        \/* Mouse Tracking Subtle Spotlight Effect *\/\r\n        .spotlight-layer {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background: radial-gradient(circle 100px at var(--x, 0px) var(--y, 0px), rgba(44, 70, 157, 0.06), transparent 80%);\r\n            opacity: 0;\r\n            transition: opacity 0.3s ease;\r\n            pointer-events: none;\r\n            border-radius: 12px;\r\n        }\r\n\r\n        .brand-tile:hover .spotlight-layer {\r\n            opacity: 1;\r\n        }\r\n\r\n        .brand-tile:hover {\r\n            border-color: rgba(44, 70, 157, 0.15);\r\n            box-shadow: 0 15px 35px rgba(44, 70, 157, 0.08);\r\n        }\r\n\r\n        \/* Logo Wrap Pushed to 3D Plane *\/\r\n        .logo-inner {\r\n            width: 100%;\r\n            height: 100%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            transform: translateZ(30px); \/* Extrudes logo slightly forward *\/\r\n            transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        }\r\n\r\n        .brand-tile:hover .logo-inner {\r\n            transform: translateZ(50px) scale(1.03);\r\n        }\r\n\r\n      \r\n\r\n        .brand-tile:hover .logo-inner img {\r\n            filter: grayscale(0%) opacity(100%); \/* Full vivid color state on hover *\/\r\n        }\r\n\r\n        \/* Responsive Breakpoints *\/\r\n        @media (max-width: 1100px) {\r\n            .brand-grid {\r\n                grid-template-columns: repeat(4, 1fr);\r\n            }\r\n            .main-title {\r\n                font-size: 36px;\r\n\t\t\t\t    font-family:poppins;\r\n\t\t\t\t\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .brand-grid {\r\n                grid-template-columns: repeat(3, 1fr);\r\n                gap: 15px;\r\n            }\r\n        \r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .brand-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n            }\r\n            .main-title {\r\n               font-size: 25px!important;\r\n\t\t\t\t    font-family:poppins;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <div class=\"marketing-container\">\r\n        \r\n        <!-- Header Section with exact text content -->\r\n        <div class=\"header-wrap\">\r\n            <h1 class=\"main-title\">CORPORATE CLIENTS<\/h1>\r\n\r\n        <\/div>\r\n\r\n        <!-- 3D Brand Grid Canvas -->\r\n        <div class=\"brand-grid\">\r\n\r\n            <!-- Card 1 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/01-1.jpeg\" alt=\"Ash Coating\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 2 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/02-2.jpeg\" alt=\"Venom Motorsports\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 3 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/03-2.jpeg\" alt=\"Fomat Medical\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 4 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/04-2.jpeg\" alt=\"Used Mobiles\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 5 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/05-1.jpeg\" alt=\"Excellent Publicity\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 6 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/08-1.jpeg\" alt=\"Chokhi Dhani\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 7 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/06-2.jpeg\" alt=\"Flight Desk\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 8 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/07-2.jpeg\" alt=\"Xorolife Insurance\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 9 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/08-2.jpeg\" alt=\"NY Travel Limo\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 10 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/09-2.jpeg\" alt=\"Infinity Collection\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 11 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/10-2.jpeg\" alt=\"Cryptomarketing Digital\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 12 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/11-2.jpeg\" alt=\"Grand Gateway Hotel\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 13 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/12-2.jpeg\" alt=\"Cryptocurrency Insurance\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 14 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/13-2.jpeg\" alt=\"Unify Healthcare\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 15 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/15-2.jpeg\" alt=\"BuyUcoin\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 16 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/16-2.jpeg\" alt=\"Ontime\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 17 -->\r\n            <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-14-at-15.02.26.jpeg\" alt=\"Shiva Polymer\">\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Card 18 -->\r\n           \r\n\t\t   \r\n\t\t   \r\n\t\t    <div class=\"brand-tile\">\r\n                <div class=\"spotlight-layer\"><\/div>\r\n                <div class=\"logo-inner\">\r\n                    <img decoding=\"async\" src=\"http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-14-at-15.03.47.jpeg\" alt=\"Royez Immigration\">\r\n                <\/div>\r\n            <\/div>\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Mouse Tracking Engine for 3D Tile Transforms -->\r\n    <script>\r\n        const tiles = document.querySelectorAll('.brand-tile');\r\n\r\n        tiles.forEach(tile => {\r\n            tile.addEventListener('mousemove', (e) => {\r\n                const rect = tile.getBoundingClientRect();\r\n                \r\n                const x = e.clientX - rect.left;\r\n                const y = e.clientY - rect.top;\r\n\r\n                tile.style.setProperty('--x', `${x}px`);\r\n                tile.style.setProperty('--y', `${y}px`);\r\n\r\n                const centerX = rect.width \/ 2;\r\n                const centerY = rect.height \/ 2;\r\n                \r\n                const rotateX = ((y - centerY) \/ centerY) * -12; \r\n                const rotateY = ((x - centerX) \/ centerX) * 12;\r\n\r\n                tile.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\r\n            });\r\n\r\n            tile.addEventListener('mouseleave', () => {\r\n                tile.style.transform = 'rotateX(0deg) rotateY(0deg)';\r\n            });\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Brand Associations BRAND ASSOCIATIONS Smart Marketing Clients Grid CORPORATE CLIENTS<\/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-22495","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sampleprojects.in\/interior\/wp-json\/wp\/v2\/pages\/22495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sampleprojects.in\/interior\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sampleprojects.in\/interior\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sampleprojects.in\/interior\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sampleprojects.in\/interior\/wp-json\/wp\/v2\/comments?post=22495"}],"version-history":[{"count":0,"href":"https:\/\/sampleprojects.in\/interior\/wp-json\/wp\/v2\/pages\/22495\/revisions"}],"wp:attachment":[{"href":"https:\/\/sampleprojects.in\/interior\/wp-json\/wp\/v2\/media?parent=22495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}