{"id":5691,"date":"2024-11-05T08:33:57","date_gmt":"2024-11-05T08:33:57","guid":{"rendered":"https:\/\/4sightksa.hostcarts.digital\/?page_id=5691"},"modified":"2024-11-08T12:07:28","modified_gmt":"2024-11-08T12:07:28","slug":"life-4sight","status":"publish","type":"page","link":"https:\/\/4sightksa.hostcarts.digital\/ar\/life-4sight\/","title":{"rendered":"\u0627\u0644\u062d\u064a\u0627\u0629 @ 4Sight"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"5691\" class=\"elementor elementor-5691\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38fd3b9 e-flex e-con-boxed e-con e-parent\" data-id=\"38fd3b9\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-207235e elementor-widget elementor-widget-heading\" data-id=\"207235e\" data-element_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\">\u0627\u062d\u062a\u0641\u0627\u0644\u062a\u0646\u0627<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a367299 e-flex e-con-boxed e-con e-parent\" data-id=\"a367299\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-19ebbf2 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"19ebbf2\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b5b3abc elementor-widget elementor-widget-text-editor\" data-id=\"b5b3abc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u0641\u064a \u0634\u0631\u0643\u0629 \u0627\u0644\u0628\u0635\u0627\u0626\u0631 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0644\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u062a\u0633\u0648\u064a\u0642\u064a\u0629 \u0627\u0644\u0645\u062d\u062f\u0648\u062f\u0629\u060c \u0646\u0639\u062a\u0642\u062f \u0623\u0646 \u0628\u064a\u0626\u0629 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0633\u0639\u064a\u062f\u0629 \u062a\u0633\u0627\u0639\u062f \u0641\u064a \u0625\u062e\u0631\u0627\u062c \u0623\u0641\u0636\u0644 \u0645\u0627 \u0641\u064a\u0643. \u064a\u062c\u0628 \u0623\u0646 \u064a\u062a\u0645 \u0627\u0644\u0627\u0639\u062a\u0631\u0627\u0641 \u0628\u0627\u0644\u0634\u0639\u0648\u0631 \u0627\u0644\u0630\u064a \u062a\u0634\u0639\u0631 \u0628\u0647 \u0639\u0646\u062f\u0645\u0627 \u062a\u062d\u0642\u0642 \u0623\u0647\u062f\u0627\u0641\u0643 \u0628\u0623\u0643\u062b\u0631 \u0645\u0646 \u0645\u062c\u0631\u062f \u0631\u0633\u0627\u0644\u0629 \u0628\u0631\u064a\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a. \u064a\u062c\u0628 \u0627\u0644\u0627\u062d\u062a\u0641\u0627\u0644 \u0628\u0647. \u0641\u064a \u0634\u0631\u0643\u0629 \u0627\u0644\u0628\u0635\u0627\u0626\u0631 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0644\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u062a\u0633\u0648\u064a\u0642\u064a\u0629 \u0627\u0644\u0645\u062d\u062f\u0648\u062f\u0629\u060c \u0646\u062d\u062a\u0641\u0644 \u0628\u0623\u0639\u064a\u0627\u062f \u0627\u0644\u0645\u064a\u0644\u0627\u062f\u060c \u0648\u0646\u062e\u0631\u062c \u0645\u0639 \u0627\u0644\u0639\u0627\u0626\u0644\u0627\u062a\u060c \u0648\u0646\u0646\u0638\u0645 \u0631\u062d\u0644\u0627\u062a \u0633\u0646\u0648\u064a\u0629\u060c \u0648\u0646\u0644\u0639\u0628 \u0645\u0639\u064b\u0627\u060c \u0648\u0646\u062d\u062a\u0641\u0644 \u0628\u0627\u0644\u0645\u0647\u0631\u062c\u0627\u0646\u0627\u062a \u0648\u0646\u0645\u0646\u062d \u0623\u0646\u0641\u0633\u0646\u0627 \u0627\u0644\u0645\u0632\u064a\u062f \u0645\u0646 \u0647\u0630\u0647 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0627\u062a \u0644\u0644\u0627\u0633\u062a\u0645\u062a\u0627\u0639.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd3fd63 elementor-widget elementor-widget-html\" data-id=\"bd3fd63\" data-element_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>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Image Carousel<\/title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        .carousel-container {\n            position: relative;\n            width: 80%;\n            max-width: 900px;\n            overflow: hidden;\n            margin: auto;\n        }\n\n        .carousel-track-container {\n            overflow: hidden;\n            width: 100%;\n        }\n\n        .carousel-track {\n            display: flex;\n            transition: transform 0.5s ease;\n        }\n\n        .carousel-slide {\n            min-width: 100%;\n            box-sizing: border-box;\n            padding: 20px;\n        }\n\n        .card {\n            background-color: #fff;\n            border-radius: 10px;\n            padding: 20px;\n            text-align: center;\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n        }\n\n        .card img {\n            width: 100%;\n            height: 500px;\n            object-fit: cover;\n            border-radius: 10px;\n            cursor: pointer;\n        }\n\n        .card h3 {\n            margin-top: 10px;\n            color: #333;\n        }\n\n        .card p {\n            color: #777;\n        }\n\n        .carousel-button {\n            position: absolute;\n            top: 50%;\n            transform: translateY(-50%);\n            background: rgba(255, 255, 255, 0.7);\n            border: none;\n            font-size: 24px;\n            color: #333;\n            cursor: pointer;\n            z-index: 1;\n            height: 100%;\n            width: 40px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .left-arrow {\n            left: 0;\n        }\n\n        .right-arrow {\n            right: 0;\n        }\n\n        \/* Modal styles *\/\n        .modal {\n            display: none;\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(0, 0, 0, 0.8);\n            justify-content: center;\n            align-items: center;\n            z-index: 1000;\n        }\n\n        .modal-content {\n            max-width: 80%;\n            max-height: 80%;\n            position: relative;\n        }\n\n        \/* Ensuring consistent image size in modal *\/\n        .modal-content img {\n            width: 100%;\n            \n            max-height: 500px;\n            object-fit: contain;\n            border-radius: 10px;\n        }\n\n        .close-button {\n            position: absolute;\n            top: 10px;\n            right: 10px;\n            font-size: 30px;\n            color: #000000\n;\n            background: none;\n            border: none;\n            cursor: pointer;\n        }\n\n        \/* Modal arrow buttons *\/\n        .modal-arrow {\n            position: absolute;\n            top: 50%;\n            transform: translateY(-50%);\n            background: rgba(255, 255, 255, 0.7);\n            border: none;\n            font-size: 24px;\n            color: #333;\n            cursor: pointer;\n            width: 40px;\n            height: 40px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .modal-left-arrow {\n            left: 10px;\n        }\n\n        .modal-right-arrow {\n            right: 10px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"carousel-container\">\n        <button class=\"carousel-button left-arrow\" onclick=\"prevSlide()\">&#10094;<\/button>\n        \n        <div class=\"carousel-track-container\">\n            <ul class=\"carousel-track\">\n                <!-- Card 1 -->\n                <li class=\"carousel-slide active\">\n                    <div class=\"card\">\n                        <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/womens-day-2019.png\" alt=\"Image 1\" onclick=\"openModal(0)\">\n                        <h3>\u064a\u0648\u0645 \u0627\u0644\u0645\u0631\u0627\u0621\u0629 \u0627\u0644\u0639\u0627\u0644\u0645\u064a<\/h3>\n                        <p>\u0635\u0648\u0631\u062a\u0627\u0646<\/p>\n                    <\/div>\n                <\/li>\n                \n                <!-- Card 2 -->\n                <li class=\"carousel-slide\">\n                    <div class=\"card\">\n                        <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/Val-1.jpeg\" alt=\"Image 2\" onclick=\"openModal(1)\">\n                        <h3>Valentine's Day<\/h3>\n                        <p>5 Photos<\/p>\n                    <\/div>\n                <\/li>\n\n                <!-- Card 3 -->\n                <li class=\"carousel-slide\">\n                    <div class=\"card\">\n                        <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/secret-santa-4.jpg\" alt=\"Image 3\" onclick=\"openModal(2)\">\n                        <h3>Secret Santa<\/h3>\n                        <p>15 Photos<\/p>\n                    <\/div>\n                <\/li>\n                \n                <!-- Card 4 -->\n                <li class=\"carousel-slide\">\n                    <div class=\"card\">\n                        <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/ifthar-saudi.jpg\" alt=\"Image 2\" onclick=\"openModal(3)\">\n                        <h3>Ifthar Gatherings - Saudi<\/h3>\n                        <p>5 Photos<\/p>\n                    <\/div>\n                <\/li>\n                \n                \n            <\/ul>\n        <\/div>\n        \n        <button class=\"carousel-button right-arrow\" onclick=\"nextSlide()\">&#10095;<\/button>\n    <\/div>\n\n    <!-- Modal for image popup -->\n    <div class=\"modal\" id=\"imageModal\">\n        <div class=\"modal-content\">\n            <button class=\"close-button\" onclick=\"closeModal()\">&times;<\/button>\n            <img decoding=\"async\" id=\"modalImage\" src=\"\" alt=\"Popup Image\">\n            <button class=\"modal-arrow modal-left-arrow\" onclick=\"prevModalImage()\">&#10094;<\/button>\n            <button class=\"modal-arrow modal-right-arrow\" onclick=\"nextModalImage()\">&#10095;<\/button>\n        <\/div>\n    <\/div>\n\n    <script>\n        let currentIndex = 0;\n        const slides = document.querySelectorAll(\".carousel-slide\");\n        const totalSlides = slides.length;\n\n        \/\/ Carousel functions\n        function updateSlidePosition() {\n            const track = document.querySelector(\".carousel-track\");\n            track.style.transform = `translateX(-${currentIndex * 100}%)`;\n        }\n\n        function nextSlide() {\n            currentIndex = (currentIndex + 1) % totalSlides;\n            updateSlidePosition();\n        }\n\n        function prevSlide() {\n            currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;\n            updateSlidePosition();\n        }\n\n        \/\/ Modal images for each card\n        const cardImages = [\n            [\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/womens-day-2019.png\",\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/Women-Day-2.jpeg\"],\n            [\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/Val-1.jpeg\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/Val-2.jpeg\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/Val-2.jpeg\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/Val-4.jpeg\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/Val-5.jpeg\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/Val-3.jpeg\"],\n            [\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/secret-santa.png\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/secret-santa-6.jpg\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/secret-santa-5.jpg\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/secret-santa-4.jpg\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/secret-santa-3.jpg\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/secret-santa-2.jpg\"], \n            \n            \n            [\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/ifthar-saudi.jpg\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/ifthar-saudi-5.jpg\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/ifthar-saudi-2.jpg\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/ifarsaudi-3.jpg\"], \n            \n            \n        ];\n\n        let modalImageIndex = 0;\n        let modalImages = [];\n\n        \/\/ Modal functions\n        function openModal(index) {\n            modalImages = cardImages[index]; \/\/ Set modal images to the selected card's images\n            modalImageIndex = 0; \/\/ Start with the first image in the array\n            document.getElementById(\"modalImage\").src = modalImages[modalImageIndex];\n            document.getElementById(\"imageModal\").style.display = \"flex\";\n        }\n\n        function closeModal() {\n            document.getElementById(\"imageModal\").style.display = \"none\";\n        }\n\n        function nextModalImage() {\n            modalImageIndex = (modalImageIndex + 1) % modalImages.length;\n            document.getElementById(\"modalImage\").src = modalImages[modalImageIndex];\n        }\n\n        function prevModalImage() {\n            modalImageIndex = (modalImageIndex - 1 + modalImages.length) % modalImages.length;\n            document.getElementById(\"modalImage\").src = modalImages[modalImageIndex];\n        }\n\n        \/\/ Close modal when clicking outside of the modal content\n        window.onclick = function(event) {\n            const modal = document.getElementById(\"imageModal\");\n            if (event.target === modal) {\n                closeModal();\n            }\n        };\n    <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6e913d4 e-flex e-con-boxed e-con e-parent\" data-id=\"6e913d4\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bc131b9 elementor-widget elementor-widget-heading\" data-id=\"bc131b9\" data-element_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\">\u062a\u0639\u0631\u0651\u064f\u0641<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f7355fb elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"f7355fb\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89665aa elementor-widget elementor-widget-text-editor\" data-id=\"89665aa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u0627\u0644\u0627\u0639\u062a\u0631\u0627\u0641 \u0628\u0627\u0644\u0646\u062c\u0627\u062d \u0645\u0639\u064b\u0627 - \u0646\u062c\u062a\u0645\u0639 \u0643\u0644 \u0639\u0627\u0645 \u0644\u0644\u0627\u062d\u062a\u0641\u0627\u0644 \u0628\u0627\u0644\u0646\u062c\u0627\u062d \u0648\u0627\u0644\u0625\u0646\u062c\u0627\u0632\u0627\u062a \u0627\u0644\u0645\u062a\u0645\u064a\u0632\u0629 \u0644\u0645\u0648\u0638\u0641\u064a\u0646\u0627. \u0645\u0648\u0638\u0641 \u0634\u0631\u0643\u0629 \u0627\u0644\u0628\u0635\u0627\u0626\u0631 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0644\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u062a\u0633\u0648\u064a\u0642\u064a\u0629 \u0627\u0644\u0645\u062d\u062f\u0648\u062f\u0629 \u0647\u0648 \u0627\u0644\u0634\u062e\u0635 \u0627\u0644\u0630\u064a \u062a\u0633\u0627\u0647\u0645 \u0645\u0633\u0627\u0647\u0645\u062a\u0647 \u0641\u064a \u0625\u062d\u062f\u0627\u062b \u062a\u0623\u062b\u064a\u0631 \u0643\u0628\u064a\u0631 \u0641\u064a \u0623\u0639\u0645\u0627\u0644 \u0627\u0644\u0634\u0631\u0643\u0629 \u0623\u0648 \u062e\u0628\u0631\u062a\u0647\u0627 \u0623\u0648 \u0645\u0634\u0627\u0631\u0643\u062a\u0647\u0627 \u0623\u0648 \u0643\u0641\u0627\u0621\u062a\u0647\u0627 \u0623\u0648 \u0627\u0642\u062a\u0635\u0627\u062f\u0647\u0627.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-565807a elementor-widget elementor-widget-html\" data-id=\"565807a\" data-element_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>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Your Brand - Our Team<\/title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        \/* Updated Button Styles *\/\n        .button-container {\n            display: flex;\n            justify-content: center;\n            padding: 20px 0;\n        }\n\n        .button {\n            background-color: transparent;\n            color:#94D60A ;\n            border-radius: 10px;\n            padding: 12px 25px;\n            font-size: 16px;\n            margin: 0 12px;\n            border: solid;\n            cursor: pointer;\n            font-weight: bold;\n            transition: transform 0.3s, background-color 0.3s;\n        }\n\n       .button:hover {\n    background-color: transparent;\n    color: #00A1E1;\n    transform: scale(1.05);\n    border: 2px solid #00A1E1; \/* Adds a red border *\/\n}\n\n\n        \/* Team Section *\/\n        .team-section {\n            padding: 40px 0;\n            text-align: center;\n        }\n\n        .team-container {\n            display: flex;\n            justify-content: center;\n            gap: 80px;\n            flex-wrap: wrap;\n        }\n\n        .team-member {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            text-align: center;\n        }\n\n        .team-image img {\n            width: 450px;\n            height: 350px;\n            object-fit: cover;\n            border: 3px solid #94D60A;\n            margin-bottom: 10px;\n            border-radius: 20px;\n            cursor: pointer;\n        }\n\n        \/* Responsive Design *\/\n        @media (max-width: 768px) {\n            .team-container {\n                flex-direction: column;\n                align-items: center;\n            }\n        }\n\n        \/* Section styles for Teams, Leadership, and Insights *\/\n        .section {\n            display: none; \/* Hide all sections by default *\/\n        }\n\n        .section.active {\n            display: block; \/* Show the active section *\/\n        }\n\n        \/* Lightbox Styles *\/\n        .lightbox {\n            display: none;\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.8);\n            justify-content: center;\n            align-items: center;\n            z-index: 1000;\n        }\n\n        .lightbox img {\n            max-width: 90%;\n            max-height: 90%;\n            border-radius: 10px;\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <!-- Button Navigation -->\n    <div class=\"button-container\">\n        <button class=\"button\" id=\"teams-btn\">4 Sight Achiever - 2019<\/button>\n        <button class=\"button\" id=\"leadership-btn\">4 Sight Achiever - 2018<\/button>\n        <button class=\"button\" id=\"insights-btn\">4 Sight Achiever - 2017<\/button>\n    <\/div>\n\n    <!-- Teams Section -->\n    <section class=\"team-section section\" id=\"teams\">\n        <div class=\"team-container\">\n            <!-- Team Member 1 -->\n            <div class=\"team-member\">\n                <div class=\"team-image\">\n                    <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/achiever-3.jpeg\" alt=\"Anand Nigam\">\n                <\/div>\n            <\/div>\n\n            <!-- Team Member 2 -->\n            <div class=\"team-member\">\n                <div class=\"team-image\">\n                    <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/achiever-2.jpeg\" alt=\"Deepak Kudkilwar\">\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Leadership Section -->\n    <section class=\"team-section section\" id=\"leadership\">\n        <div class=\"team-container\">\n            <div class=\"team-member\">\n                <div class=\"team-image\">\n                    <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/2018-achiever.jpg\" alt=\"Anand Nigam\">\n                <\/div>\n            <\/div>\n\n            <div class=\"team-member\">\n                <div class=\"team-image\">\n                    <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/2018-achiever-3.jpg\" alt=\"Deepak Kudkilwar\">\n                <\/div>\n            <\/div>\n\n            <div class=\"team-member\">\n                <div class=\"team-image\">\n                    <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/2018-achiever-2.jpg\" alt=\"Deepak Kudkilwar\">\n                <\/div>\n            <\/div>\n\n            <div class=\"team-member\">\n                <div class=\"team-image\">\n                    <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/2018-achiever-1.jpg\" alt=\"Deepak Kudkilwar\">\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Insights Section -->\n    <section class=\"team-section section\" id=\"insights\">\n        <div class=\"team-container\">\n            <div class=\"team-member\">\n                <div class=\"team-image\">\n                    <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/2017-Achiever.jpg\" alt=\"Afakh-Umair-Khan\">\n                <\/div>\n            <\/div>\n\n            <div class=\"team-member\">\n                <div class=\"team-image\">\n                    <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/2017-achiever-3.jpg\" alt=\"Anannya-Das\">\n                <\/div>\n            <\/div>\n\n            <div class=\"team-member\">\n                <div class=\"team-image\">\n                    <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/2017-achiever-2.jpg\" alt=\"Anannya-Chitransh\">\n                <\/div>\n            <\/div>\n\n            <div class=\"team-member\">\n                <div class=\"team-image\">\n                    <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/2017-achiever-1.jpg\" alt=\"Anisha-Gooptu\">\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Lightbox -->\n    <div class=\"lightbox\" id=\"lightbox\">\n        <img decoding=\"async\" src=\"\" alt=\"Expanded View\">\n    <\/div>\n\n    <script>\n        \/\/ Button click event listeners\n        document.getElementById('teams-btn').addEventListener('click', function() {\n            showSection('teams');\n        });\n\n        document.getElementById('leadership-btn').addEventListener('click', function() {\n            showSection('leadership');\n        });\n\n        document.getElementById('insights-btn').addEventListener('click', function() {\n            showSection('insights');\n        });\n\n        function showSection(sectionId) {\n            \/\/ Hide all sections\n            const sections = document.querySelectorAll('.section');\n            sections.forEach(section => section.classList.remove('active'));\n\n            \/\/ Show the selected section\n            document.getElementById(sectionId).classList.add('active');\n        }\n\n        \/\/ Show the Teams section by default\n        showSection('teams');\n\n        \/\/ Lightbox functionality\n        const lightbox = document.getElementById('lightbox');\n        const lightboxImg = lightbox.querySelector('img');\n\n        \/\/ Open lightbox on image click\n        document.querySelectorAll('.team-image img').forEach(img => {\n            img.addEventListener('click', () => {\n                lightboxImg.src = img.src;\n                lightbox.style.display = 'flex';\n            });\n        });\n\n        \/\/ Close lightbox when clicking outside the image\n        lightbox.addEventListener('click', () => {\n            lightbox.style.display = 'none';\n            lightboxImg.src = '';\n        });\n    <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1c98a12 e-flex e-con-boxed e-con e-parent\" data-id=\"1c98a12\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-47240df elementor-widget elementor-widget-heading\" data-id=\"47240df\" data-element_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\">\u0627\u0644\u062a\u0639\u0644\u0651\u064f\u0645<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0a262e9 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"0a262e9\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5de7dcc elementor-widget elementor-widget-text-editor\" data-id=\"5de7dcc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u0625\u0646 \u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0648\u0627\u0644\u062a\u0637\u0648\u064a\u0631\u060c \u0648\u062e\u0627\u0635\u0629 \u0644\u062f\u0639\u0645 \u0627\u0644\u0637\u0645\u0648\u062d\u0627\u062a \u0627\u0644\u0645\u0647\u0646\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u0645\u0631\u0629\u060c \u064a\u0634\u0643\u0644\u0627\u0646 \u062d\u0627\u0641\u0632\u064b\u0627 \u0643\u0628\u064a\u0631\u064b\u0627 \u0644\u0623\u0639\u0636\u0627\u0621 \u0627\u0644\u0641\u0631\u064a\u0642. \u0648\u0646\u062d\u0646 \u0646\u0642\u062f\u0645 \u0647\u0630\u0647 \u0627\u0644\u0641\u0631\u0635\u0629 \u0628\u0623\u0634\u0643\u0627\u0644 \u0639\u062f\u064a\u062f\u0629 - \u0645\u0646 \u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0639\u0645\u0644\u060c \u0623\u0648 \u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0627\u0644\u0639\u0645\u0644\u064a\u060c \u0623\u0648 \u0627\u0644\u0645\u0634\u0627\u0631\u0643\u0629 \u0641\u064a \u0628\u0631\u0646\u0627\u0645\u062c \u0645\u062d\u062f\u062f \u0623\u0648 \u0627\u0644\u0627\u0644\u062a\u062d\u0627\u0642 \u0628\u062f\u0648\u0631\u0629 \u062a\u062f\u0631\u064a\u0628\u064a\u0629 \u0641\u0631\u062f\u064a\u0629 \u0645\u0633\u062a\u0641\u064a\u062f\u064a\u0646 \u0645\u0646 \u0645\u064a\u0632\u0627\u0646\u064a\u0629 \u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0627\u0644\u0641\u0631\u062f\u064a\u0629 \u0627\u0644\u0645\u062e\u0635\u0635\u0629 \u0644\u0647\u0645... \u0628\u064a\u0626\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0634\u0627\u0645\u0644\u0629.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5144da8 elementor-widget elementor-widget-html\" data-id=\"5144da8\" data-element_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>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Image Carousel<\/title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        .slider-container {\n            position: relative;\n            width: 80%;\n            max-width: 900px;\n            overflow: hidden;\n            margin: auto;\n        }\n\n        .slider-track-wrapper {\n            overflow: hidden;\n            width: 100%;\n        }\n\n        .slider-track {\n            display: flex;\n            transition: transform 0.5s ease;\n        }\n\n        .slide-item {\n            min-width: 100%;\n            box-sizing: border-box;\n            padding: 20px;\n        }\n\n        .content-card {\n            background-color: #fff;\n            border-radius: 10px;\n            padding: 20px;\n            text-align: center;\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n        }\n\n        .content-card img {\n            width: 100%;\n            height: 500px;\n            object-fit: cover;\n            border-radius: 10px;\n            cursor: pointer;\n        }\n\n        .content-card h3 {\n            margin-top: 10px;\n            color: #333;\n        }\n\n        .content-card p {\n            color: #777;\n        }\n\n        .slider-button {\n            position: absolute;\n            top: 50%;\n            transform: translateY(-50%);\n            background: rgba(255, 255, 255, 0.7);\n            border: none;\n            font-size: 24px;\n            color: #333;\n            cursor: pointer;\n            z-index: 1;\n            height: 100%;\n            width: 40px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .arrow-left {\n            left: 0;\n        }\n\n        .arrow-right {\n            right: 0;\n        }\n\n        \/* Modal styles *\/\n        .popup-overlay {\n            display: none;\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(0, 0, 0, 0.8);\n            justify-content: center;\n            align-items: center;\n            z-index: 1000;\n        }\n\n        .popup-content {\n            max-width: 80%;\n            max-height: 80%;\n            position: relative;\n        }\n\n        \/* Ensuring consistent image size in modal *\/\n        .popup-content img {\n            width: 100%;\n            max-height: 500px;\n            object-fit: contain;\n            border-radius: 10px;\n        }\n\n        .close-btn {\n            position: absolute;\n            top: 10px;\n            right: 10px;\n            font-size: 30px;\n            color: #000;\n            background: none;\n            border: none;\n            cursor: pointer;\n        }\n\n        \/* Modal arrow buttons *\/\n        .popup-arrow {\n            position: absolute;\n            top: 50%;\n            transform: translateY(-50%);\n            background: rgba(255, 255, 255, 0.7);\n            border: none;\n            font-size: 24px;\n            color: #333;\n            cursor: pointer;\n            width: 40px;\n            height: 40px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .popup-arrow-left {\n            left: 10px;\n        }\n\n        .popup-arrow-right {\n            right: 10px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"slider-container\">\n        <button class=\"slider-button arrow-left\" onclick=\"goToPreviousSlide()\">&#10094;<\/button>\n        \n        <div class=\"slider-track-wrapper\">\n            <ul class=\"slider-track\">\n                <!-- Card 1 -->\n                <li class=\"slide-item active\">\n                    <div class=\"content-card\">\n                        <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/In2.png\" alt=\"Image 1\" onclick=\"showPopup(0)\">\n                        <h3>\u062c\u0644\u0633\u0627\u062a \u0627\u0644\u0627\u0633\u062a\u0643\u0634\u0627\u0641 - \u0627\u0644\u062a\u0639\u0644\u0645 \u0648\u0627\u0644\u0645\u062a\u0639\u0629<\/h3>\n                        <p>3 \u0635\u0648\u0631<\/p>\n                    <\/div>\n                <\/li>\n                \n                <!-- Card 2 -->\n                <li class=\"slide-item\">\n                    <div class=\"content-card\">\n                        <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/kickoff.png\" alt=\"Image 2\" onclick=\"showPopup(1)\">\n                        <h3>2019 KIck Off Sessions<\/h3>\n                        <p>3 \u0635\u0648\u0631<\/p>\n                    <\/div>\n                <\/li>\n\n                <!-- Card 3 -->\n                <li class=\"slide-item\">\n                    <div class=\"content-card\">\n                        <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/4sight-achiver-2.png\" alt=\"Image 3\" onclick=\"showPopup(2)\">\n                        <h3>2019 4Sight Achiever<\/h3>\n                        <p>3 \u0635\u0648\u0631<\/p>\n                    <\/div>\n                <\/li>\n                \n                <!-- Card 4 -->\n                <li class=\"slide-item\">\n                    <div class=\"content-card\">\n                        <img decoding=\"async\" src=\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/4sight-2.png\" alt=\"Image 2\" onclick=\"showPopup(3)\">\n                        <h3>2018 KIck Off Work Sessions<\/h3>\n                        <p>3 \u0635\u0648\u0631<\/p>\n                    <\/div>\n                <\/li>\n            <\/ul>\n        <\/div>\n        \n        <button class=\"slider-button arrow-right\" onclick=\"goToNextSlide()\">&#10095;<\/button>\n    <\/div>\n\n    <!-- Modal for image popup -->\n    <div class=\"popup-overlay\" id=\"imagePopup\">\n        <div class=\"popup-content\">\n            <button class=\"close-btn\" onclick=\"hidePopup()\">&times;<\/button>\n            <img decoding=\"async\" id=\"popupImage\" src=\"\" alt=\"Popup Image\">\n            <button class=\"popup-arrow popup-arrow-left\" onclick=\"previousPopupImage()\">&#10094;<\/button>\n            <button class=\"popup-arrow popup-arrow-right\" onclick=\"nextPopupImage()\">&#10095;<\/button>\n        <\/div>\n    <\/div>\n\n    <script>\n        let activeSlideIndex = 0;\n        const allSlides = document.querySelectorAll(\".slide-item\");\n        const totalSlidesCount = allSlides.length;\n\n        \/\/ Carousel functions\n        function updateSliderPosition() {\n            const sliderTrack = document.querySelector(\".slider-track\");\n            sliderTrack.style.transform = `translateX(-${activeSlideIndex * 100}%)`;\n        }\n\n        function goToNextSlide() {\n            activeSlideIndex = (activeSlideIndex + 1) % totalSlidesCount;\n            updateSliderPosition();\n        }\n\n        function goToPreviousSlide() {\n            activeSlideIndex = (activeSlideIndex - 1 + totalSlidesCount) % totalSlidesCount;\n            updateSliderPosition();\n        }\n\n        \/\/ Modal images for each card\n        const cardImageGroups = [\n            [\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/In2.png\",\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/In1.png\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/In3.png\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/In4.png\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/In6.png\"],\n            [\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/kickoff.png\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/kickoff-1.png\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/kick-off-2.png\"],\n            [\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/4sight-achiver-2.png\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/4sight-achiver.png\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/4sight-achiver-1.png\"], \n            [\"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/4sight-2.png\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/4sight.png\", \"https:\/\/4sightksa.hostcarts.digital\/wp-content\/uploads\/2024\/11\/4sight-1.png\"], \n        ];\n\n        let popupImageIndex = 0;\n        let currentPopupImages = [];\n\n        \/\/ Modal functions\n        function showPopup(index) {\n            currentPopupImages = cardImageGroups[index];\n            popupImageIndex = 0;\n            document.getElementById(\"popupImage\").src = currentPopupImages[popupImageIndex];\n            document.getElementById(\"imagePopup\").style.display = \"flex\";\n        }\n\n        function hidePopup() {\n            document.getElementById(\"imagePopup\").style.display = \"none\";\n        }\n\n        function nextPopupImage() {\n            popupImageIndex = (popupImageIndex + 1) % currentPopupImages.length;\n            document.getElementById(\"popupImage\").src = currentPopupImages[popupImageIndex];\n        }\n\n        function previousPopupImage() {\n            popupImageIndex = (popupImageIndex - 1 + currentPopupImages.length) % currentPopupImages.length;\n            document.getElementById(\"popupImage\").src = currentPopupImages[popupImageIndex];\n        }\n\n        \/\/ Close modal when clicking outside of the modal content\n        window.onclick = function(event) {\n            const popup = document.getElementById(\"imagePopup\");\n            if (event.target === popup) {\n                hidePopup();\n            }\n        };\n    <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>CELEBRATION At 4SiGHT, we believe a happy work environment helps bring out the best in you. The feeling you get when you accomplish goals should be acknowledged by more than an email. It must be celebrated. At 4SiGHT, we celebrate birthdays, go for outings with families, annual retreats, play together, celebrate festivals and give ourselves [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"tpl-default-elementor.php","meta":{"footnotes":""},"class_list":["post-5691","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/4sightksa.hostcarts.digital\/ar\/wp-json\/wp\/v2\/pages\/5691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/4sightksa.hostcarts.digital\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/4sightksa.hostcarts.digital\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/4sightksa.hostcarts.digital\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/4sightksa.hostcarts.digital\/ar\/wp-json\/wp\/v2\/comments?post=5691"}],"version-history":[{"count":466,"href":"https:\/\/4sightksa.hostcarts.digital\/ar\/wp-json\/wp\/v2\/pages\/5691\/revisions"}],"predecessor-version":[{"id":6548,"href":"https:\/\/4sightksa.hostcarts.digital\/ar\/wp-json\/wp\/v2\/pages\/5691\/revisions\/6548"}],"wp:attachment":[{"href":"https:\/\/4sightksa.hostcarts.digital\/ar\/wp-json\/wp\/v2\/media?parent=5691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}