{"id":34,"date":"2026-04-16T18:07:32","date_gmt":"2026-04-16T18:07:32","guid":{"rendered":"https:\/\/iconicstudio.net\/?page_id=34"},"modified":"2026-04-17T10:57:35","modified_gmt":"2026-04-17T10:57:35","slug":"home","status":"publish","type":"page","link":"https:\/\/iconicstudio.net\/en\/home\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"34\" class=\"elementor elementor-34\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d389bfb e-con-full e-flex e-con e-parent\" data-id=\"d389bfb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/iconicstudio.net\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/Hero.webm&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted\" role=\"presentation\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div>\t\t<div class=\"elementor-element elementor-element-8167861 elementor-widget elementor-widget-heading\" data-id=\"8167861\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u062a\u0635\u0627\u0645\u064a\u0645 \u062a\u062a\u0631\u062c\u0645 \u0627\u0644\u0647\u0648\u064a\u0629<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0ac105d elementor-widget elementor-widget-spacer\" data-id=\"0ac105d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-70e3094 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"70e3094\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>\u0623\u064a\u0643\u0648\u0646\u0643 \u062a\u062d\u0648\u0644 \u0627\u0644\u0623\u0641\u0643\u0627\u0631 \u0625\u0644\u0649 \u062a\u062c\u0627\u0631\u0628 \u0645\u0644\u0645\u0648\u0633\u0629 \u0645\u0646 \u062e\u0644\u0627\u0644 \u062a\u0635\u0645\u064a\u0645 \u062f\u0627\u062e\u0644\u064a \u0648\u062e\u0627\u0631\u062c\u064a \u0645\u062a\u0643\u0627\u0645\u0644 \u064a\u0639\u0643\u0633 \u0623\u0633\u0644\u0648\u0628 \u062d\u064a\u0627\u062a\u0643 \u0648\u064a\u0639\u0628\u0651\u0631 \u0639\u0646 \u0634\u062e\u0635\u064a\u062a\u0643<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-873739f elementor-widget elementor-widget-spacer\" data-id=\"873739f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a302d43 elementor-widget elementor-widget-button\" data-id=\"a302d43\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u062a\u0635\u0641\u062d \u0645\u0634\u0627\u0631\u064a\u0639\u0646\u0627 <\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-adabd41 elementor-widget elementor-widget-spacer\" data-id=\"adabd41\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2603042 e-con-full e-flex e-con e-parent\" data-id=\"2603042\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-435842d elementor-widget elementor-widget-html\" data-id=\"435842d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Tajawal:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\/* \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0644\u062d\u0627\u0648\u064a\u0629 *\/\r\n.ic-wrap {\r\n    padding: 80px 40px;\r\n    font-family: 'Tajawal', sans-serif;\r\n    width: 100%;\r\n    direction: rtl;\r\n   margin-bottom: -30px;\r\n}\r\n\r\n\/* \u0627\u0644\u0634\u0628\u0643\u0629 \u0648\u0627\u0644\u0641\u0648\u0627\u0635\u0644 \u0627\u0644\u0630\u0647\u0628\u064a\u0629 *\/\r\n.ic-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    position: relative;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n}\r\n\r\n.ic-grid::before, .ic-grid::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 10%;\r\n    bottom: 10%;\r\n    width: 1px;\r\n    background: linear-gradient(to bottom, transparent, rgba(204, 164, 76, 0.3), transparent);\r\n}\r\n\r\n.ic-grid::before { left: 33.33%; }\r\n.ic-grid::after { left: 66.66%; }\r\n\r\n\/* \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u062e\u0644\u0627\u064a\u0627 (\u062a\u0648\u0633\u064a\u0637 \u0645\u062a\u0646\u0627\u0633\u0642) *\/\r\n.ic-cell {\r\n    padding: 0 30px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    text-align: center;\r\n    transition: transform 0.4s ease;\r\n}\r\n\r\n.ic-cell:hover {\r\n    transform: translateY(-8px);\r\n}\r\n\r\n\/* \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0627\u062a \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 *\/\r\n.ic-icon-wrap {\r\n    margin-bottom: 24px;\r\n    height: 48px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.ic-icon-wrap svg {\r\n    width: 42px;\r\n    height: 42px;\r\n    stroke: #CCA44C;\r\n    stroke-width: 1.2;\r\n    fill: none;\r\n    transition: all 0.5s ease;\r\n}\r\n\r\n.ic-cell:hover .ic-icon-wrap svg {\r\n    transform: scale(1.15) rotate(5deg);\r\n    filter: drop-shadow(0 0 12px rgba(204, 164, 76, 0.4));\r\n}\r\n\r\n\/* \u0627\u0644\u0623\u0631\u0642\u0627\u0645 \u0648\u0627\u0644\u062e\u0637\u0648\u0637 *\/\r\n.ic-num {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 4px;\r\n    margin-bottom: 16px;\r\n    direction: ltr; \/* \u0644\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u0632\u0627\u0626\u062f \u0648\u0627\u0644\u0631\u0642\u0645 \u062f\u0627\u0626\u0645\u0627\u064b *\/\r\n}\r\n\r\n.ic-big {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 84px;\r\n    font-weight: 300;\r\n    color: #CCA44C;\r\n    line-height: 0.85;\r\n    letter-spacing: -2px;\r\n}\r\n\r\n.ic-plus {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 38px;\r\n    font-weight: 300;\r\n    color: #CCA44C;\r\n    margin-top: 4px;\r\n    opacity: 0.8;\r\n}\r\n\r\n.ic-line {\r\n    width: 35px;\r\n    height: 1px;\r\n    background: #CCA44C;\r\n    opacity: 0.5;\r\n    margin-bottom: 20px;\r\n    transition: width 0.4s ease;\r\n}\r\n\r\n.ic-cell:hover .ic-line {\r\n    width: 60px;\r\n    opacity: 0.8;\r\n}\r\n\r\n\/* \u0627\u0644\u0646\u0635\u0648\u0635 \u0627\u0644\u0648\u0635\u0641\u064a\u0629 *\/\r\n.ic-label {\r\n    font-size: 13px;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n    color: #a0a0a0;\r\n    font-weight: 500;\r\n    line-height: 1.6;\r\n}\r\n\r\n\/* \u0627\u0644\u0641\u0648\u062a\u0631 (\u0627\u0644\u0639\u0644\u0627\u0645\u0629 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629) *\/\r\n.ic-footer {\r\n    margin-top: 20px;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n    padding-top: 30px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center; \/* \u062a\u0648\u0633\u064a\u0637 \u0627\u0644\u0641\u0648\u062a\u0631 *\/\r\n    gap: 20px;\r\n    max-width: 1200px;\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n}\r\n\r\n.ic-brand {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 13px;\r\n    font-weight: 300;\r\n    letter-spacing: 4px;\r\n    color: #555;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.ic-dot {\r\n    width: 4px;\r\n    height: 4px;\r\n    border-radius: 50%;\r\n    background: #CCA44C;\r\n    opacity: 0.4;\r\n}\r\n\r\n\/* \u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0627\u0644\u062c\u0648\u0627\u0644 *\/\r\n@media(max-width: 800px) {\r\n    .ic-grid { grid-template-columns: 1fr; gap: 50px; }\r\n    .ic-grid::before, .ic-grid::after { display: none; }\r\n    .ic-cell { border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 40px; }\r\n    .ic-cell:last-child { border-bottom: none; padding-bottom: 0; }\r\n    .ic-big { font-size: 72px; }\r\n    .ic-footer { flex-direction: column; gap: 10px; text-align: center; }\r\n    .ic-dot { display: none; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"ic-wrap\" id=\"ic-root\">\r\n    <div class=\"ic-grid\" id=\"ic-grid\">\r\n        \r\n        <div class=\"ic-cell\">\r\n            <div class=\"ic-icon-wrap\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M3 21h18M5 21V7l7-4 7 4v14M9 11v4M15 11v4M9 7h6M9 15h6\"\/><\/svg>\r\n            <\/div>\r\n            <div class=\"ic-num\"><span class=\"ic-plus\">+<\/span><span class=\"ic-big ic-count\" data-target=\"50\">0<\/span><\/div>\r\n            <div class=\"ic-line\"><\/div>\r\n            <div class=\"ic-label\" id=\"ic-l1\">\u0645\u0634\u0631\u0648\u0639 \u0645\u0643\u062a\u0645\u0644<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ic-cell\">\r\n            <div class=\"ic-icon-wrap\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l-4.5 9h9L12 2zM12 22a8 8 0 1 0 0-16M12 14v8\"\/><\/svg>\r\n            <\/div>\r\n            <div class=\"ic-num\"><span class=\"ic-plus\">+<\/span><span class=\"ic-big ic-count\" data-target=\"8\">0<\/span><\/div>\r\n            <div class=\"ic-line\"><\/div>\r\n            <div class=\"ic-label\" id=\"ic-l2\">\u0633\u0646\u0648\u0627\u062a \u062e\u0628\u0631\u0629 \u0641\u064a \u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ic-cell\">\r\n            <div class=\"ic-icon-wrap\">\r\n                <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 2 7 12 12 22 7 12 2\"><\/polygon><polyline points=\"2 12 12 17 22 12\"><\/polyline><polyline points=\"2 17 12 22 22 17\"><\/polyline><\/svg>\r\n            <\/div>\r\n            <div class=\"ic-num\"><span class=\"ic-plus\">+<\/span><span class=\"ic-big ic-count\" data-target=\"40\">0<\/span><\/div>\r\n            <div class=\"ic-line\"><\/div>\r\n            <div class=\"ic-label\" id=\"ic-l3\">\u062a\u0635\u0645\u064a\u0645 \u0633\u0643\u0646\u064a \u0648\u062a\u062c\u0627\u0631\u064a \u0645\u0645\u064a\u0632<\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"ic-footer\">\r\n        <span class=\"ic-brand\">Iconic Solution Studio<\/span>\r\n        <span class=\"ic-dot\"><\/span>\r\n        <span class=\"ic-brand\" id=\"ic-tag\">\u0644\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0639\u0645\u0627\u0631\u064a<\/span>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ \u0643\u0648\u062f \u0627\u0644\u062c\u0627\u0641\u0627\u0633\u0643\u0631\u0628\u062a \u0627\u0644\u0622\u0646 \u0645\u0633\u0624\u0648\u0644 \u0641\u0642\u0637 \u0639\u0646 \u062a\u0623\u062b\u064a\u0631 \u0639\u062f\u0627\u062f \u0627\u0644\u0623\u0631\u0642\u0627\u0645 (\u0627\u0644\u0623\u0646\u064a\u0645\u064a\u0634\u0646) \r\nvar animated = false;\r\nfunction icAnimate() {\r\n    if (animated) return;\r\n    animated = true;\r\n    document.querySelectorAll('.ic-count').forEach(function(el) {\r\n        var target = +el.getAttribute('data-target'),\r\n            start = null,\r\n            dur = 1800; \/\/ \u0645\u062f\u0629 \u0627\u0644\u0639\u062f\u0627\u062f\r\n\r\n        function ease(t) { return 1 - Math.pow(1 - t, 3); }\r\n\r\n        function frame(ts) {\r\n            if (!start) start = ts;\r\n            var p = Math.min((ts - start) \/ dur, 1);\r\n            el.textContent = Math.round(ease(p) * target);\r\n            if (p < 1) {\r\n                requestAnimationFrame(frame);\r\n            } else {\r\n                el.textContent = target; \/\/ \u0636\u0645\u0627\u0646 \u0627\u0644\u0648\u0635\u0648\u0644 \u0644\u0644\u0631\u0642\u0645 \u0627\u0644\u0646\u0647\u0627\u0626\u064a \u0628\u062f\u0642\u0629\r\n            }\r\n        }\r\n        requestAnimationFrame(frame);\r\n    });\r\n}\r\n\r\n\/\/ \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0639\u062f\u0627\u062f \u0639\u0646\u062f \u0648\u0635\u0648\u0644 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0625\u0644\u064a\u0647 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u062a\u0645\u0631\u064a\u0631\r\nif ('IntersectionObserver' in window) {\r\n    var obs = new IntersectionObserver(function(e) {\r\n        if (e[0].isIntersecting) {\r\n            icAnimate();\r\n            obs.disconnect();\r\n        }\r\n    }, { threshold: 0.3 });\r\n    obs.observe(document.getElementById('ic-root'));\r\n} else {\r\n    icAnimate();\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d3fa55 elementor-widget elementor-widget-html\" data-id=\"1d3fa55\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;700;800&family=Montserrat:wght@200;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    \/* \u0645\u0646\u0639 \u062a\u062f\u062e\u0644\u0627\u062a \u0642\u0627\u0644\u0628 \u0627\u0644\u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633 (Reset Theme Overrides) *\/\r\n    .iconic-super-wrapper button, \r\n    .iconic-super-wrapper a,\r\n    .ic-lightbox button {\r\n        outline: none !important;\r\n        -webkit-tap-highlight-color: transparent !important;\r\n        text-decoration: none !important;\r\n    }\r\n\r\n    .iconic-super-wrapper {\r\n        padding: 100px 20px;\r\n        position: relative;\r\n        font-family: 'Tajawal', sans-serif !important; \r\n    }\r\n\r\n    \/* \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0647\u0646\u062f\u0633\u064a\u0629 *\/\r\n    .iconic-super-wrapper::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 100%;\r\n        background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),\r\n                          linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);\r\n        background-size: 60px 60px;\r\n        z-index: -1;\r\n    }\r\n\r\n    .iconic-super-container {\r\n        max-width: 1300px;\r\n        margin: 0 auto;\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .super-header {\r\n        margin-bottom: 50px;\r\n        text-align: start; \r\n    }\r\n\r\n    .super-header h2 {\r\n        font-size: clamp(35px, 5vw, 52px);\r\n        font-weight: 800;\r\n        color: #ffffff !important;\r\n        margin: 0;\r\n        text-shadow: 0 10px 30px rgba(0,0,0,0.8);\r\n        font-family: 'Tajawal', sans-serif !important;\r\n    }\r\n\r\n    .super-header p {\r\n        color: #CCA44C !important;\r\n        font-size: 16px;\r\n        font-weight: 700;\r\n        margin: 0 0 10px 0;\r\n        letter-spacing: 2px;\r\n        text-transform: uppercase;\r\n        font-family: 'Tajawal', sans-serif !important;\r\n    }\r\n\r\n    \/* \u0627\u0644\u0623\u0643\u0648\u0631\u062f\u064a\u0648\u0646 (\u062a\u0645 \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0627\u0646\u0633\u064a\u0627\u0628\u064a\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0646\u062d\u0646\u0649 Cubic-bezier \u0646\u0627\u0639\u0645 \u062c\u062f\u0627\u064b) *\/\r\n    .super-accordion {\r\n        display: flex;\r\n        height: 600px; \r\n        gap: 20px;\r\n    }\r\n\r\n    .super-panel {\r\n        flex: 1;\r\n        position: relative;\r\n        border-radius: 24px; \r\n        background-size: cover;\r\n        background-position: center;\r\n        transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important; \/* \u0627\u0646\u0633\u064a\u0627\u0628\u064a\u0629 \u0642\u0635\u0648\u0649 *\/\r\n        filter: grayscale(80%) brightness(0.5); \r\n        border: 1px solid rgba(255, 255, 255, 0.05);\r\n        cursor: pointer;\r\n        overflow: hidden; \r\n        will-change: flex, filter;\r\n    }\r\n\r\n    .super-panel:hover {\r\n        flex: 5; \r\n        filter: grayscale(0%) brightness(1); \r\n        border-color: rgba(204, 164, 76, 0.6); \r\n        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);\r\n    }\r\n\r\n    .panel-num {\r\n        position: absolute;\r\n        top: 25px;\r\n        inset-inline-start: 25px; \r\n        font-family: 'Montserrat', sans-serif !important;\r\n        font-size: 60px;\r\n        font-weight: 200;\r\n        color: transparent !important;\r\n        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);\r\n        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n        z-index: 2;\r\n    }\r\n\r\n    .super-panel:hover .panel-num {\r\n        -webkit-text-stroke: 2px #CCA44C; \r\n        transform: scale(1.1);\r\n    }\r\n\r\n    .panel-vertical-title {\r\n        position: absolute;\r\n        top: 55%; \r\n        left: 50%; \r\n        transform: translate(-50%, -50%) rotate(-90deg);\r\n        transform-origin: center center;\r\n        font-size: 26px;\r\n        font-weight: 800;\r\n        color: #ffffff !important;\r\n        white-space: nowrap;\r\n        letter-spacing: 2px;\r\n        transition: opacity 0.4s ease;\r\n        text-shadow: 0 2px 10px rgba(0,0,0,0.8);\r\n        font-family: 'Tajawal', sans-serif !important;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .super-panel:hover .panel-vertical-title { opacity: 0; }\r\n\r\n    .panel-glass-content {\r\n        position: absolute;\r\n        bottom: 30px; \r\n        inset-inline-start: 30px; \r\n        inset-inline-end: 30px; \r\n        background: rgba(15, 15, 15, 0.85);\r\n        backdrop-filter: blur(25px);\r\n        -webkit-backdrop-filter: blur(25px);\r\n        border: 1px solid rgba(204, 164, 76, 0.4); \r\n        border-radius: 16px;\r\n        padding: 35px;\r\n        opacity: 0;\r\n        transform: translateY(30px); \r\n        transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);\r\n        display: flex;\r\n        flex-direction: column;\r\n        text-align: start; \r\n        align-items: flex-start; \r\n        pointer-events: none;\r\n        z-index: 5;\r\n    }\r\n\r\n    .super-panel:hover .panel-glass-content {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n        transition-delay: 0.15s; \r\n        pointer-events: auto;\r\n    }\r\n\r\n    .panel-glass-content h3 {\r\n        font-size: 30px;\r\n        font-weight: 800;\r\n        color: #ffffff !important;\r\n        margin: 0 0 10px 0;\r\n        font-family: 'Tajawal', sans-serif !important;\r\n    }\r\n\r\n    .panel-glass-content p {\r\n        font-size: 15px;\r\n        color: #ccc !important;\r\n        line-height: 1.6;\r\n        margin: 0 0 25px 0;\r\n        font-family: 'Tajawal', sans-serif !important;\r\n    }\r\n\r\n    .panel-btn {\r\n        background: #CCA44C !important;\r\n        color: #000 !important;  \r\n        padding: 12px 30px;\r\n        border-radius: 50px;\r\n        font-size: 15px;\r\n        font-weight: 800;\r\n        font-family: 'Tajawal', sans-serif !important;\r\n        cursor: pointer;\r\n        border: 1px solid transparent !important;\r\n        transition: all 0.4s ease !important;\r\n    }\r\n\r\n    .panel-btn:hover {\r\n        background: rgba(204, 164, 76, 0.1) !important; \r\n        color: #CCA44C !important; \r\n        border-color: #CCA44C !important; \r\n        transform: translateY(-3px);\r\n    }\r\n\r\n    \/* \u062a\u062d\u0633\u064a\u0646\u0627\u062a \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0623\u0635\u063a\u0631 *\/\r\n    @media (max-width: 1100px) {\r\n        .panel-vertical-title { font-size: 20px; }\r\n        .panel-glass-content { padding: 20px; }\r\n        .panel-glass-content h3 { font-size: 24px; }\r\n    }\r\n\r\n    @media (max-width: 900px) {\r\n        .iconic-super-wrapper { padding: 60px 15px; }\r\n        .super-accordion { flex-direction: column; height: auto; gap: 25px; }\r\n        .super-panel { \r\n            height: auto; min-height: 400px;\r\n            flex: none !important; \r\n            filter: grayscale(0%) brightness(0.8); \r\n            border-color: rgba(204, 164, 76, 0.3);\r\n        }\r\n        .panel-vertical-title { display: none; }\r\n        .panel-glass-content { \r\n            position: relative; bottom: auto; inset-inline-start: auto; inset-inline-end: auto;\r\n            transform: none; opacity: 1;\r\n            margin: 150px 15px 15px 15px; \r\n            pointer-events: auto; padding: 25px;\r\n        }\r\n        .panel-num { font-size: 50px; inset-inline-start: 20px; top: 15px; -webkit-text-stroke: 1.5px #CCA44C; }\r\n    }\r\n\r\n    \/* ---------------------------------\r\n       \u0627\u0644\u0640 Lightbox (\u062a\u0645\u062a \u0625\u0636\u0627\u0641\u0629 \u0627\u0646\u0633\u064a\u0627\u0628\u064a\u0629 \u0627\u0644\u062a\u062d\u0645\u064a\u0644)\r\n       --------------------------------- *\/\r\n    .ic-lightbox {\r\n        display: none; \r\n        position: fixed;\r\n        top: 0; left: 0; right: 0; bottom: 0;\r\n        z-index: 2147483647; \r\n        align-items: center;\r\n        justify-content: center;\r\n        opacity: 0;\r\n        transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n        direction: ltr; \r\n    }\r\n\r\n    .ic-lightbox.active {\r\n        display: flex;\r\n        opacity: 1;\r\n    }\r\n\r\n    .ic-lb-overlay {\r\n        position: absolute;\r\n        inset: 0;\r\n        background: rgba(8, 8, 8, 0.98); \r\n        backdrop-filter: blur(15px);\r\n        -webkit-backdrop-filter: blur(15px);\r\n        cursor: pointer;\r\n    }\r\n\r\n    .ic-lb-content {\r\n        position: relative;\r\n        z-index: 2147483647;\r\n        max-width: 90vw;\r\n        max-height: 85vh;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        transform: scale(0.95); \/* \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u062f\u062e\u0648\u0644 *\/\r\n        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n    }\r\n\r\n    .ic-lightbox.active .ic-lb-content {\r\n        transform: scale(1);\r\n    }\r\n\r\n    .ic-lb-img {\r\n        max-width: 100%;\r\n        max-height: 75vh;\r\n        border-radius: 12px;\r\n        box-shadow: 0 10px 40px rgba(0,0,0,0.8);\r\n        border: 2px solid rgba(204, 164, 76, 0.3); \r\n        object-fit: contain;\r\n        \/* \u0627\u0646\u0633\u064a\u0627\u0628\u064a\u0629 \u0627\u0644\u062a\u0628\u062f\u064a\u0644 \u0628\u064a\u0646 \u0627\u0644\u0635\u0648\u0631 *\/\r\n        transition: opacity 0.4s ease, transform 0.4s ease; \r\n        opacity: 0; \/* \u062a\u0628\u062f\u0623 \u0645\u062e\u0641\u064a\u0629 \u0644\u062d\u064a\u0646 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 *\/\r\n        transform: scale(0.98);\r\n    }\r\n\r\n    .ic-lb-img.loaded {\r\n        opacity: 1;\r\n        transform: scale(1);\r\n    }\r\n\r\n    \/* \u0627\u0644\u0623\u0632\u0631\u0627\u0631 (\u062d\u0645\u0627\u064a\u0629 \u0645\u0646 \u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0642\u0627\u0644\u0628) *\/\r\n    .ic-lb-btn {\r\n        position: absolute;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        background: rgba(20, 20, 20, 0.8) !important;\r\n        border: 1px solid rgba(204, 164, 76, 0.5) !important;\r\n        color: #CCA44C !important;\r\n        width: 55px; height: 55px;\r\n        border-radius: 50%;\r\n        font-size: 22px;\r\n        cursor: pointer;\r\n        display: flex; align-items: center; justify-content: center;\r\n        transition: all 0.3s ease !important;\r\n        z-index: 10;\r\n    }\r\n\r\n    .ic-lb-btn:hover { background: #CCA44C !important; color: #000 !important; }\r\n    .ic-lb-prev { left: -80px; }\r\n    .ic-lb-next { right: -80px; }\r\n\r\n    .ic-lb-close {\r\n        position: absolute;\r\n        top: -50px; right: 0;\r\n        background: none !important;\r\n        border: none !important;\r\n        color: #fff !important;\r\n        font-size: 45px;\r\n        cursor: pointer;\r\n        transition: color 0.3s !important;\r\n        line-height: 1; z-index: 10;\r\n        text-shadow: 0 2px 10px rgba(0,0,0,0.5);\r\n    }\r\n    .ic-lb-close:hover { color: #CCA44C !important; }\r\n\r\n    .ic-lb-counter {\r\n        margin-top: 20px;\r\n        color: #fff;\r\n        font-family: 'Montserrat', sans-serif !important;\r\n        letter-spacing: 2px; font-size: 15px;\r\n        background: rgba(204, 164, 76, 0.15);\r\n        padding: 5px 15px; border-radius: 20px;\r\n    }\r\n\r\n    @media (max-width: 900px) {\r\n        .ic-lb-content { max-width: 95vw; }\r\n        .ic-lb-img { max-height: 65vh; }\r\n        .ic-lb-prev { left: 10px; width: 45px; height: 45px; }\r\n        .ic-lb-next { right: 10px; width: 45px; height: 45px; }\r\n        .ic-lb-close { top: -60px; right: 10px; font-size: 50px; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"iconic-super-wrapper\">\r\n    <div class=\"iconic-super-container\">\r\n        \r\n        <div class=\"super-header\">\r\n            <p>\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629<\/p>\r\n            <h2>\u0645\u0639\u0631\u0636 \u0627\u0644\u0623\u0639\u0645\u0627\u0644<\/h2>\r\n        <\/div>\r\n\r\n        <div class=\"super-accordion\">\r\n            \r\n            <div class=\"super-panel\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1600585154340-be6161a56a0c?q=80&w=1200&auto=format&fit=crop');\">\r\n                <div class=\"panel-num\">01<\/div>\r\n                <div class=\"panel-vertical-title\">\u062a\u0635\u0645\u064a\u0645 \u0633\u0643\u0646\u064a<\/div>\r\n                <div class=\"panel-glass-content\">\r\n                    <h3>\u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0633\u0643\u0646\u064a<\/h3>\r\n                    <p>\u0646\u0642\u062f\u0645 \u062d\u0644\u0648\u0644\u0627\u064b \u062a\u0635\u0645\u064a\u0645\u064a\u0629 \u0644\u0644\u0645\u0633\u0627\u062d\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629\u060c \u0645\u0646 \u0627\u0644\u0645\u0646\u0627\u0632\u0644 \u0627\u0644\u0641\u0631\u062f\u064a\u0629 \u0625\u0644\u0649 \u0627\u0644\u0645\u062c\u0645\u0639\u0627\u062a \u0627\u0644\u0645\u062a\u0643\u0627\u0645\u0644\u0629.<\/p>\r\n                    <button class=\"panel-btn\" onclick=\"openGallery(0)\">\u0627\u0633\u062a\u0639\u0631\u0636 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639<\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"super-panel\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?q=80&w=1200&auto=format&fit=crop');\">\r\n                <div class=\"panel-num\">02<\/div>\r\n                <div class=\"panel-vertical-title\">\u062a\u0635\u0645\u064a\u0645 \u062a\u062c\u0627\u0631\u064a<\/div>\r\n                <div class=\"panel-glass-content\">\r\n                    <h3>\u0628\u064a\u0626\u0627\u062a \u0639\u0645\u0644 \u0645\u062a\u0643\u0627\u0645\u0644\u0629<\/h3>\r\n                    <p>\u062a\u0635\u0645\u064a\u0645 \u064a\u062c\u0645\u0639 \u0628\u064a\u0646 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629 \u0627\u0644\u0628\u0635\u0631\u064a\u0629 \u0648\u0627\u0644\u0643\u0641\u0627\u0621\u0629 \u0627\u0644\u0648\u0638\u064a\u0641\u064a\u0629\u060c \u0628\u0645\u0627 \u064a\u0639\u0643\u0633 \u0647\u0648\u064a\u0629 \u0627\u0644\u0645\u0643\u0627\u0646.<\/p>\r\n                    <button class=\"panel-btn\" onclick=\"openGallery(1)\">\u0627\u0633\u062a\u0639\u0631\u0636 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639<\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"super-panel\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1517248135467-4c7edcad34c4?q=80&w=1200&auto=format&fit=crop');\">\r\n                <div class=\"panel-num\">03<\/div>\r\n                <div class=\"panel-vertical-title\">\u0627\u0644\u0636\u064a\u0627\u0641\u0629 \u0648\u0627\u0644\u0645\u0637\u0627\u0639\u0645<\/div>\r\n                <div class=\"panel-glass-content\">\r\n                    <h3>\u062a\u062c\u0631\u0628\u0629 \u0636\u064a\u0627\u0641\u0629 \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629<\/h3>\r\n                    <p>\u0645\u0633\u0627\u062d\u0627\u062a \u0645\u062f\u0631\u0648\u0633\u0629 \u062a\u062c\u0645\u0639 \u0628\u064a\u0646 \u0627\u0644\u0623\u062c\u0648\u0627\u0621 \u0627\u0644\u062c\u0630\u0627\u0628\u0629 \u0648\u0627\u0644\u0631\u0627\u062d\u0629\u060c \u0644\u062a\u0642\u062f\u064a\u0645 \u062a\u062c\u0631\u0628\u0629 \u0637\u0639\u0627\u0645 \u0645\u062a\u0643\u0627\u0645\u0644\u0629.<\/p>\r\n                    <button class=\"panel-btn\" onclick=\"openGallery(2)\">\u0627\u0633\u062a\u0639\u0631\u0636 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639<\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"super-panel\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1613490493576-7fde63acd811?q=80&w=1200&auto=format&fit=crop');\">\r\n                <div class=\"panel-num\">04<\/div>\r\n                <div class=\"panel-vertical-title\">\u0648\u0627\u062c\u0647\u0627\u062a \u0645\u0639\u0645\u0627\u0631\u064a\u0629<\/div>\r\n                <div class=\"panel-glass-content\">\r\n                    <h3>\u0648\u0627\u062c\u0647\u0627\u062a \u062a\u0646\u0628\u0636 \u0628\u0627\u0644\u0647\u0648\u064a\u0629<\/h3>\r\n                    <p>\u0648\u0627\u062c\u0647\u0629 \u062a\u0639\u0643\u0633 \u0647\u0648\u064a\u0629 \u0645\u0628\u0646\u0627\u0643 \u0645\u0646 \u0627\u0644\u0644\u062d\u0638\u0629 \u0627\u0644\u0623\u0648\u0644\u0649\u060c \u0628\u062a\u0635\u0645\u064a\u0645 \u0639\u0635\u0631\u064a \u064a\u062a\u0631\u0643 \u0627\u0646\u0637\u0628\u0627\u0639\u0627\u064b \u0644\u0627 \u064a\u064f\u0646\u0633\u0649.<\/p>\r\n                    <button class=\"panel-btn\" onclick=\"openGallery(3)\">\u0627\u0633\u062a\u0639\u0631\u0636 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639<\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<div class=\"ic-lightbox\" id=\"icLightbox\">\r\n    <div class=\"ic-lb-overlay\" onclick=\"closeGallery()\"><\/div>\r\n    <div class=\"ic-lb-content\">\r\n        <button class=\"ic-lb-close\" onclick=\"closeGallery()\">\u00d7<\/button>\r\n        <button class=\"ic-lb-btn ic-lb-prev\" onclick=\"changeImage(-1)\">&#10094;<\/button>\r\n        <img decoding=\"async\" src=\"\" alt=\"Project Image\" class=\"ic-lb-img\" id=\"lbImage\">\r\n        <button class=\"ic-lb-btn ic-lb-next\" onclick=\"changeImage(1)\">&#10095;<\/button>\r\n        <div class=\"ic-lb-counter\"><span id=\"lbCurrent\">1<\/span> \/ <span id=\"lbTotal\">3<\/span><\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst projectGalleries = [\r\n    [ \r\n        \"https:\/\/images.unsplash.com\/photo-1600585154340-be6161a56a0c?q=80&w=1600\",\r\n        \"https:\/\/images.unsplash.com\/photo-1600607687939-ce8a6c25118c?q=80&w=1600\",\r\n        \"https:\/\/images.unsplash.com\/photo-1600566753190-17f0baa2a6c3?q=80&w=1600\"\r\n    ],\r\n    [ \r\n        \"https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?q=80&w=1600\",\r\n        \"https:\/\/images.unsplash.com\/photo-1497215728101-856f4ea42174?q=80&w=1600\",\r\n        \"https:\/\/images.unsplash.com\/photo-1497366754035-f200968a6e72?q=80&w=1600\"\r\n    ],\r\n    [ \r\n        \"https:\/\/images.unsplash.com\/photo-1517248135467-4c7edcad34c4?q=80&w=1600\",\r\n        \"https:\/\/images.unsplash.com\/photo-1550966871-3ed3cdb5ed0c?q=80&w=1600\"\r\n    ],\r\n    [ \r\n        \"https:\/\/images.unsplash.com\/photo-1613490493576-7fde63acd811?q=80&w=1600\",\r\n        \"https:\/\/images.unsplash.com\/photo-1512917774080-9991f1c4c750?q=80&w=1600\"\r\n    ]\r\n];\r\n\r\nlet currentGallery = [];\r\nlet currentIndex = 0;\r\n\r\nconst lightbox = document.getElementById('icLightbox');\r\nconst lbImage = document.getElementById('lbImage');\r\nconst lbCurrent = document.getElementById('lbCurrent');\r\nconst lbTotal = document.getElementById('lbTotal');\r\n\r\n\/\/ \u0627\u0644\u0633\u0637\u0631 \u0627\u0644\u0633\u062d\u0631\u064a: \u0646\u0642\u0644 \u0627\u0644\u0628\u0648\u0628 \u0623\u0628 \u0644\u062c\u0630\u0631 \u0627\u0644\u0635\u0641\u062d\u0629\r\ndocument.body.appendChild(lightbox);\r\n\r\n\/\/ \u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0623\u0646 \u0627\u0644\u0635\u0648\u0631\u0629 \u0644\u0627 \u062a\u0638\u0647\u0631 \u0625\u0644\u0627 \u0628\u0639\u062f \u0627\u0643\u062a\u0645\u0627\u0644 \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u0644\u0636\u0645\u0627\u0646 \u0627\u0644\u0627\u0646\u0633\u064a\u0627\u0628\u064a\u0629\r\nlbImage.onload = function() {\r\n    lbImage.classList.add('loaded');\r\n};\r\n\r\nfunction openGallery(index) {\r\n    currentGallery = projectGalleries[index];\r\n    if(currentGallery && currentGallery.length > 0) {\r\n        currentIndex = 0;\r\n        lbTotal.innerText = currentGallery.length;\r\n        loadImageSmoothly();\r\n        lightbox.classList.add('active');\r\n        document.documentElement.style.overflow = 'hidden'; \r\n    }\r\n}\r\n\r\nfunction closeGallery() {\r\n    lightbox.classList.remove('active');\r\n    document.documentElement.style.overflow = '';\r\n    setTimeout(() => { lbImage.classList.remove('loaded'); }, 400); \/\/ \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0635\u0648\u0631\u0629 \u0628\u0639\u062f \u0627\u0644\u0625\u063a\u0644\u0627\u0642\r\n}\r\n\r\nfunction changeImage(dir) {\r\n    currentIndex += dir;\r\n    if (currentIndex >= currentGallery.length) currentIndex = 0;\r\n    if (currentIndex < 0) currentIndex = currentGallery.length - 1;\r\n    \r\n    \/\/ \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u062d\u0627\u0644\u064a\u0629 \u0628\u0644\u0637\u0641\r\n    lbImage.classList.remove('loaded');\r\n    \r\n    \/\/ \u062a\u0623\u062e\u064a\u0631 \u0628\u0633\u064a\u0637 \u0642\u0628\u0644 \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u062c\u062f\u064a\u062f\u0629 \u0644\u0625\u0639\u0637\u0627\u0621 \u062a\u0623\u062b\u064a\u0631 \u0627\u0646\u062a\u0642\u0627\u0644 (Crossfade)\r\n    setTimeout(() => {\r\n        loadImageSmoothly();\r\n    }, 300);\r\n}\r\n\r\nfunction loadImageSmoothly() {\r\n    lbImage.src = currentGallery[currentIndex]; \/\/ \u0628\u0645\u062c\u0631\u062f \u0623\u0646 \u064a\u062a\u0645 \u0627\u0644\u062a\u062d\u0645\u064a\u0644\u060c \u0633\u064a\u0639\u0645\u0644 onload \u0648\u064a\u0636\u064a\u0641 \u0643\u0644\u0627\u0633 loaded\r\n    lbCurrent.innerText = currentIndex + 1;\r\n}\r\n\r\ndocument.addEventListener('keydown', (e) => {\r\n    if(lightbox.classList.contains('active')) {\r\n        if(e.key === 'ArrowRight') changeImage(1);\r\n        if(e.key === 'ArrowLeft') changeImage(-1);\r\n        if(e.key === 'Escape') closeGallery();\r\n    }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0ebcc48 elementor-widget elementor-widget-html\" data-id=\"0ebcc48\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700;800&family=Montserrat:wght@200;300;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    .iconic-timeline-section * { box-sizing: border-box; outline: none; }\r\n\r\n    .iconic-timeline-section {\r\n        --tl-gold: #CCA44C;\r\n        --tl-dark: #070707;\r\n        --tl-glass: rgba(20, 20, 20, 0.6);\r\n        --tl-border: rgba(204, 164, 76, 0.2);\r\n        \r\n        background-color: var(--tl-dark);\r\n        padding: 120px 0;\r\n        font-family: 'Tajawal', sans-serif;\r\n        color: #fff;\r\n        position: relative;\r\n        overflow: hidden;\r\n        direction: rtl; \/* \u064a\u062a\u062c\u0627\u0648\u0628 \u0645\u0639 \u0644\u063a\u0629 \u0627\u0644\u0645\u062a\u0635\u0641\u062d *\/\r\n    }\r\n\r\n    \/* \u062e\u0644\u0641\u064a\u0629 \u0634\u0628\u0643\u064a\u0629 \u062a\u0648\u062d\u064a \u0628\u0627\u0644\u0645\u062e\u0637\u0637\u0627\u062a \u0627\u0644\u0647\u0646\u062f\u0633\u064a\u0629 *\/\r\n    .iconic-timeline-section::before {\r\n        content: '';\r\n        position: absolute;\r\n        inset: 0;\r\n        background-image: \r\n            linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),\r\n            linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);\r\n        background-size: 40px 40px;\r\n        z-index: 0;\r\n    }\r\n\r\n    .tl-container {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        position: relative;\r\n        z-index: 1;\r\n        padding: 0 20px;\r\n    }\r\n\r\n    \/* \u0627\u0644\u0647\u064a\u062f\u0631 *\/\r\n    .tl-header {\r\n        text-align: center;\r\n        margin-bottom: 80px;\r\n    }\r\n\r\n    .tl-header span {\r\n        font-family: 'Montserrat', 'Tajawal', sans-serif;\r\n        color: var(--tl-gold);\r\n        font-size: 14px;\r\n        letter-spacing: 4px;\r\n        text-transform: uppercase;\r\n        display: block;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .tl-header h2 {\r\n        font-size: clamp(38px, 5vw, 55px);\r\n        font-weight: 800;\r\n        margin: 0;\r\n    }\r\n\r\n    \/* ---------------------------------\r\n       \u0645\u0633\u0627\u0631 \u0627\u0644\u0631\u062d\u0644\u0629 (The Timeline Core)\r\n       --------------------------------- *\/\r\n    .tl-wrapper {\r\n        position: relative;\r\n    }\r\n\r\n    \/* \u0627\u0644\u062e\u0637 \u0627\u0644\u0645\u0631\u0643\u0632\u064a \u0627\u0644\u0628\u0627\u0647\u062a *\/\r\n    .tl-line-bg {\r\n        position: absolute;\r\n        top: 0;\r\n        bottom: 0;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        width: 2px;\r\n        background-color: rgba(255, 255, 255, 0.05);\r\n        z-index: 1;\r\n    }\r\n\r\n    \/* \u0627\u0644\u062e\u0637 \u0627\u0644\u0630\u0647\u0628\u064a \u0627\u0644\u0630\u064a \u064a\u064f\u0631\u0633\u0645 \u0645\u0639 \u0627\u0644\u0640 Scroll *\/\r\n    .tl-line-fill {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        width: 2px;\r\n        background-color: var(--tl-gold);\r\n        height: 0%; \r\n        z-index: 2;\r\n        transition: height 0.1s ease-out;\r\n        box-shadow: 0 0 15px var(--tl-gold);\r\n    }\r\n\r\n    \/* \u0627\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u0648\u0627\u062d\u062f *\/\r\n    .tl-item {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-bottom: 80px;\r\n        position: relative;\r\n        z-index: 3;\r\n        opacity: 0;\r\n        transform: translateY(40px);\r\n        transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n    }\r\n\r\n    .tl-item.visible {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n    \/* \u0627\u0644\u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u062a\u0628\u0627\u062f\u0644\u064a \u0627\u0644\u0635\u062d\u064a\u062d (\u0627\u0644\u0633\u0631 \u0647\u0646\u0627) *\/\r\n    .tl-item:nth-child(odd) { flex-direction: row; }\r\n    .tl-item:nth-child(even) { flex-direction: row-reverse; }\r\n\r\n    \/* \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629 \u0627\u0644\u0645\u0631\u0643\u0632\u064a\u0629 *\/\r\n    .tl-icon {\r\n        width: 80px;\r\n        height: 80px;\r\n        background: #0d0d0d;\r\n        border: 2px solid var(--tl-border);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-shrink: 0;\r\n        transition: all 0.5s ease;\r\n        position: relative;\r\n        box-shadow: 0 0 20px rgba(0,0,0,0.8);\r\n    }\r\n\r\n    .tl-icon svg {\r\n        width: 40px;\r\n        height: 40px;\r\n        stroke: var(--tl-gold);\r\n        stroke-width: 1.2;\r\n        fill: none;\r\n        transition: all 0.5s ease;\r\n    }\r\n\r\n    .tl-item:hover .tl-icon {\r\n        border-color: var(--tl-gold);\r\n        background: rgba(204, 164, 76, 0.1);\r\n        box-shadow: 0 0 30px rgba(204, 164, 76, 0.3);\r\n        transform: scale(1.1);\r\n    }\r\n\r\n    .tl-item:hover .tl-icon svg {\r\n        transform: scale(1.1);\r\n    }\r\n\r\n    \/* \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0632\u062c\u0627\u062c\u064a\u0629 *\/\r\n    .tl-content {\r\n        width: 42%;\r\n        background: var(--tl-glass);\r\n        backdrop-filter: blur(15px);\r\n        -webkit-backdrop-filter: blur(15px);\r\n        border: 1px solid rgba(255, 255, 255, 0.03);\r\n        border-radius: 20px;\r\n        padding: 40px;\r\n        position: relative;\r\n        transition: all 0.5s ease;\r\n        text-align: start;\r\n    }\r\n\r\n    .tl-item:hover .tl-content {\r\n        border-color: var(--tl-border);\r\n        background: rgba(30, 30, 30, 0.8);\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 20px 40px rgba(0,0,0,0.5);\r\n    }\r\n\r\n    \/* \u0627\u0644\u0623\u0633\u0647\u0645 \u0627\u0644\u0645\u062a\u0643\u064a\u0641\u0629 \u0645\u0639 \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0648\u0627\u0644\u0644\u063a\u0629 *\/\r\n    .tl-content::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        width: 0;\r\n        height: 0;\r\n        border-top: 10px solid transparent;\r\n        border-bottom: 10px solid transparent;\r\n        transition: all 0.5s ease;\r\n    }\r\n\r\n    \/* \u0633\u0647\u0645 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0627\u0644\u0641\u0631\u062f\u064a\u0629 *\/\r\n    .tl-item:nth-child(odd) .tl-content::before {\r\n        inset-inline-end: -10px;\r\n        border-inline-start: 10px solid rgba(255, 255, 255, 0.03);\r\n    }\r\n    .tl-item:nth-child(odd):hover .tl-content::before {\r\n        border-inline-start-color: var(--tl-border);\r\n    }\r\n\r\n    \/* \u0633\u0647\u0645 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0627\u0644\u0632\u0648\u062c\u064a\u0629 *\/\r\n    .tl-item:nth-child(even) .tl-content::before {\r\n        inset-inline-start: -10px;\r\n        border-inline-end: 10px solid rgba(255, 255, 255, 0.03);\r\n    }\r\n    .tl-item:nth-child(even):hover .tl-content::before {\r\n        border-inline-end-color: var(--tl-border);\r\n    }\r\n\r\n    .tl-empty { width: 42%; }\r\n\r\n    \/* \u0627\u0644\u0646\u0635\u0648\u0635 *\/\r\n    .tl-step {\r\n        font-family: 'Montserrat', sans-serif;\r\n        color: rgba(255,255,255,0.15);\r\n        font-size: 40px;\r\n        font-weight: 200;\r\n        position: absolute;\r\n        top: 20px;\r\n        inset-inline-end: 25px;\r\n        line-height: 1;\r\n        transition: color 0.4s;\r\n    }\r\n\r\n    .tl-item:hover .tl-step { color: rgba(204, 164, 76, 0.2); }\r\n\r\n    .tl-content h3 {\r\n        font-size: 26px;\r\n        font-weight: 800;\r\n        color: #fff;\r\n        margin: 0 0 15px 0;\r\n        position: relative;\r\n        z-index: 2;\r\n        transition: color 0.3s;\r\n    }\r\n\r\n    .tl-item:hover .tl-content h3 { color: var(--tl-gold); }\r\n\r\n    .tl-content p {\r\n        font-size: 15px;\r\n        color: #999;\r\n        line-height: 1.7;\r\n        margin: 0;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    \/* \u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0627\u0644\u062c\u0648\u0627\u0644 *\/\r\n    @media (max-width: 900px) {\r\n        .tl-line-bg, .tl-line-fill {\r\n            left: auto;\r\n            inset-inline-start: 40px; \r\n            transform: none;\r\n        }\r\n        .tl-item, .tl-item:nth-child(odd), .tl-item:nth-child(even) {\r\n            flex-direction: row;\r\n            justify-content: flex-start;\r\n            gap: 30px;\r\n            margin-bottom: 50px;\r\n        }\r\n        .tl-icon { width: 60px; height: 60px; z-index: 5; margin-inline-start: 10px; }\r\n        .tl-icon svg { width: 30px; height: 30px; }\r\n        .tl-content { width: calc(100% - 90px); padding: 30px 20px; }\r\n        .tl-empty { display: none; }\r\n        .tl-content::before { display: none; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"iconic-timeline-section\" id=\"iconic-timeline\">\r\n    <div class=\"tl-container\">\r\n        \r\n        <div class=\"tl-header\">\r\n            <span>Our Process<\/span>\r\n            <h2>\u0645\u0633\u0627\u0631 \u0627\u0644\u0625\u0628\u062f\u0627\u0639 \u0627\u0644\u0647\u0646\u062f\u0633\u064a<\/h2>\r\n        <\/div>\r\n\r\n        <div class=\"tl-wrapper\">\r\n            <div class=\"tl-line-bg\"><\/div>\r\n            <div class=\"tl-line-fill\" id=\"tl-fill\"><\/div>\r\n\r\n            <div class=\"tl-item\">\r\n                <div class=\"tl-content\">\r\n                    <span class=\"tl-step\">01<\/span>\r\n                    <h3>\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u062a\u0635\u0645\u064a\u0645<\/h3>\r\n                    <p>\u062a\u062d\u0644\u064a\u0644 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643 \u0628\u062f\u0642\u0629 \u0648\u0641\u0647\u0645 \u0631\u0624\u064a\u062a\u0643 \u062b\u0645 \u0646\u0642\u062a\u0631\u062d \u062d\u0644\u0648\u0644\u0627\u064b \u062a\u0635\u0645\u064a\u0645\u064a\u0629 \u0645\u062f\u0631\u0648\u0633\u0629 \u062a\u0646\u0627\u0633\u0628 \u0630\u0648\u0642\u0643.<\/p>\r\n                <\/div>\r\n                <div class=\"tl-icon\">\r\n                    <svg viewBox=\"0 0 24 24\">\r\n                        <path d=\"M12 3l-4 7h8z\"><\/path><circle cx=\"12\" cy=\"14\" r=\"2\"><\/circle><path d=\"M12 16v5\"><\/path><path d=\"M8 21h8\"><\/path><path d=\"M5 10a9 9 0 0 0 14 0\"><\/path>\r\n                    <\/svg>\r\n                <\/div>\r\n                <div class=\"tl-empty\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"tl-item\">\r\n                <div class=\"tl-content\">\r\n                    <span class=\"tl-step\">02<\/span>\r\n                    <h3>\u062a\u0635\u0645\u064a\u0645 \u0645\u0639\u0645\u0627\u0631\u064a<\/h3>\r\n                    <p>\u062a\u0635\u0645\u064a\u0645 \u062e\u0627\u0631\u062c\u064a \u0648\u0648\u0627\u062c\u0647\u0627\u062a \u062a\u0639\u0643\u0633 \u0647\u0648\u064a\u0629 \u0645\u0646\u0632\u0644\u0643 \u0645\u0646 \u0627\u0644\u0644\u062d\u0638\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 \u0628\u062c\u0645\u0627\u0644 \u0648\u0648\u0638\u064a\u0641\u0629.<\/p>\r\n                <\/div>\r\n                <div class=\"tl-icon\">\r\n                    <svg viewBox=\"0 0 24 24\">\r\n                        <path d=\"M3 21h18\"><\/path><path d=\"M5 21v-14l8 -4v18\"><\/path><path d=\"M19 21v-10l-6 -4\"><\/path><path d=\"M9 9v4\"><\/path><path d=\"M9 15v2\"><\/path>\r\n                    <\/svg>\r\n                <\/div>\r\n                <div class=\"tl-empty\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"tl-item\">\r\n                <div class=\"tl-content\">\r\n                    <span class=\"tl-step\">03<\/span>\r\n                    <h3>\u062a\u0635\u0645\u064a\u0645 \u062f\u0627\u062e\u0644\u064a<\/h3>\r\n                    <p>\u0646\u062d\u0648\u0651\u0644 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a \u0627\u0644\u062f\u0627\u062e\u0644\u064a\u0629 \u0625\u0644\u0649 \u0628\u064a\u0626\u0627\u062a \u0623\u0646\u064a\u0642\u0629 \u062a\u0639\u0643\u0633 \u0623\u0633\u0644\u0648\u0628 \u062d\u064a\u0627\u062a\u0643 \u0627\u0644\u062e\u0627\u0635.<\/p>\r\n                <\/div>\r\n                <div class=\"tl-icon\">\r\n                    <svg viewBox=\"0 0 24 24\">\r\n                        <path d=\"M4 11a2 2 0 0 1 2 2v1h12v-1a2 2 0 0 1 2 2v5a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1z\"><\/path><path d=\"M4 11v-4a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v4\"><\/path><line x1=\"8\" y1=\"21\" x2=\"8\" y2=\"23\"><\/line><line x1=\"16\" y1=\"21\" x2=\"16\" y2=\"23\"><\/line>\r\n                    <\/svg>\r\n                <\/div>\r\n                <div class=\"tl-empty\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"tl-item\">\r\n                <div class=\"tl-content\">\r\n                    <span class=\"tl-step\">04<\/span>\r\n                    <h3>\u062e\u062f\u0645\u0629 \u0627\u0644\u062a\u0646\u0641\u064a\u0630<\/h3>\r\n                    <p>\u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u062a\u0635\u0627\u0645\u064a\u0645 \u0625\u0644\u0649 \u0648\u0627\u0642\u0639 \u0645\u0644\u0645\u0648\u0633 \u0628\u062f\u0642\u0629 \u0639\u0627\u0644\u064a\u0629 \u0644\u0636\u0645\u0627\u0646 \u062a\u0646\u0641\u064a\u0630 \u0645\u0637\u0627\u0628\u0642 \u0644\u0644\u0631\u0624\u064a\u0629.<\/p>\r\n                <\/div>\r\n                <div class=\"tl-icon\">\r\n                    <svg viewBox=\"0 0 24 24\">\r\n                        <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"><\/line><line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"12\"><\/line><line x1=\"8\" y1=\"12\" x2=\"8\" y2=\"20\"><\/line><line x1=\"16\" y1=\"12\" x2=\"16\" y2=\"20\"><\/line>\r\n                    <\/svg>\r\n                <\/div>\r\n                <div class=\"tl-empty\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"tl-item\">\r\n                <div class=\"tl-content\">\r\n                    <span class=\"tl-step\">05<\/span>\r\n                    <h3>\u062e\u062f\u0645\u0629 \u0627\u0644\u062a\u0623\u062b\u064a\u062b<\/h3>\r\n                    <p>\u0627\u062e\u062a\u064a\u0627\u0631 \u0648\u062a\u062c\u0647\u064a\u0632 \u0627\u0644\u0623\u062b\u0627\u062b \u0628\u0639\u0646\u0627\u064a\u0629 \u0641\u0627\u0626\u0642\u0629 \u0628\u0645\u0627 \u064a\u062a\u0646\u0627\u0633\u0628 \u0645\u0639 \u0637\u0628\u064a\u0639\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0648\u0637\u0627\u0628\u0639 \u0627\u0644\u062a\u0635\u0645\u064a\u0645.<\/p>\r\n                <\/div>\r\n                <div class=\"tl-icon\">\r\n                    <svg viewBox=\"0 0 24 24\">\r\n                        <path d=\"M9 20h6\"><\/path><path d=\"M12 20v-8\"><\/path><path d=\"M5 12h14l-4 -8h-6z\"><\/path><path d=\"M8.5 12l1.5 8\"><\/path>\r\n                    <\/svg>\r\n                <\/div>\r\n                <div class=\"tl-empty\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"tl-item\">\r\n                <div class=\"tl-content\">\r\n                    <span class=\"tl-step\">06<\/span>\r\n                    <h3>\u062e\u062f\u0645\u0629 \u0627\u0644\u0625\u0634\u0631\u0627\u0641<\/h3>\r\n                    <p>\u0645\u0631\u0627\u0642\u0628\u0629 \u062c\u0648\u062f\u0629 \u0627\u0644\u062a\u0646\u0641\u064a\u0630 \u0641\u064a \u0643\u0644 \u0645\u0631\u062d\u0644\u0629 \u0644\u0636\u0645\u0627\u0646 \u0625\u0646\u062c\u0627\u0632 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0628\u0643\u0641\u0627\u0621\u0629 \u0639\u0627\u0644\u064a\u0629.<\/p>\r\n                <\/div>\r\n                <div class=\"tl-icon\">\r\n                    <svg viewBox=\"0 0 24 24\">\r\n                        <circle cx=\"12\" cy=\"12\" r=\"2\"><\/circle><path d=\"M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7\"><\/path><path d=\"M15 15l2.5 2.5\"><\/path>\r\n                    <\/svg>\r\n                <\/div>\r\n                <div class=\"tl-empty\"><\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const items = document.querySelectorAll('.tl-item');\r\n    const fillLine = document.getElementById('tl-fill');\r\n    const timelineSection = document.getElementById('iconic-timeline');\r\n\r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                entry.target.classList.add('visible');\r\n            }\r\n        });\r\n    }, { threshold: 0.2 });\r\n\r\n    items.forEach(item => observer.observe(item));\r\n\r\n    window.addEventListener('scroll', () => {\r\n        const rect = timelineSection.getBoundingClientRect();\r\n        const viewportHeight = window.innerHeight;\r\n        \r\n        let scrollPercentage = 0;\r\n        \r\n        if (rect.top < viewportHeight \/ 2) {\r\n            const totalHeight = rect.height;\r\n            const scrolled = (viewportHeight \/ 2) - rect.top;\r\n            scrollPercentage = (scrolled \/ totalHeight) * 100;\r\n        }\r\n        \r\n        scrollPercentage = Math.max(0, Math.min(100, scrollPercentage));\r\n        fillLine.style.height = scrollPercentage + '%';\r\n    });\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-905a1fa e-con-full e-flex e-con e-parent\" data-id=\"905a1fa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-462510d elementor-widget elementor-widget-html\" data-id=\"462510d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Montserrat:wght@200;700;900&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    .iconic-about-wrap * { box-sizing: border-box; outline: none; }\r\n\r\n    .iconic-about-wrap {\r\n        --gold: #CCA44C;\r\n        --dark: #050505;\r\n        --gray-text: #999;\r\n        \r\n        background-color: var(--dark);\r\n        padding: 120px 0;\r\n        font-family: 'Tajawal', sans-serif;\r\n        color: #fff;\r\n        position: relative;\r\n        overflow: hidden;\r\n        text-align: start; \/* \u0645\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 RTL\/LTR *\/\r\n    }\r\n\r\n    \/* \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0645\u062e\u0637\u0637 \u0627\u0644\u0647\u0646\u062f\u0633\u064a \u062e\u0641\u064a\u0641\u0629 \u062c\u062f\u0627\u064b *\/\r\n    .iconic-about-wrap::before {\r\n        content: '';\r\n        position: absolute;\r\n        inset: 0;\r\n        background-image: linear-gradient(rgba(204, 164, 76, 0.015) 1px, transparent 1px),\r\n                          linear-gradient(90deg, rgba(204, 164, 76, 0.015) 1px, transparent 1px);\r\n        background-size: 80px 80px;\r\n        z-index: 0;\r\n    }\r\n\r\n    .about-container {\r\n        max-width: 1300px;\r\n        margin: 0 auto;\r\n        padding: 0 40px;\r\n        position: relative;\r\n        z-index: 2;\r\n        display: flex;\r\n        gap: 100px;\r\n        align-items: flex-start;\r\n    }\r\n\r\n    \/* ---------------------------------\r\n       \u0627\u0644\u062c\u0627\u0646\u0628 \u0627\u0644\u0646\u0635\u064a (\u0627\u0644\u0642\u0635\u0629 \u0648\u0627\u0644\u062a\u0639\u0631\u064a\u0641)\r\n       --------------------------------- *\/\r\n    .about-text-side {\r\n        flex: 1.2;\r\n    }\r\n\r\n    .about-tag {\r\n        font-family: 'Montserrat', sans-serif;\r\n        color: var(--gold) !important;\r\n        font-size: 13px;\r\n        font-weight: 700;\r\n        letter-spacing: 5px;\r\n        text-transform: uppercase;\r\n        display: block;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .about-title {\r\n        font-size: clamp(35px, 5vw, 55px);\r\n        font-weight: 900;\r\n        line-height: 1.2;\r\n        margin: 0 0 40px 0;\r\n        color: #fff !important;\r\n    }\r\n\r\n    .about-desc {\r\n        font-size: 17px;\r\n        line-height: 1.9;\r\n        color: var(--gray-text) !important;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .about-desc strong {\r\n        color: #fff;\r\n        font-weight: 700;\r\n    }\r\n\r\n    \/* ---------------------------------\r\n       \u0627\u0644\u0642\u064a\u0645 \u0627\u0644\u062c\u0648\u0647\u0631\u064a\u0629 (Pillars)\r\n       --------------------------------- *\/\r\n    .about-pillars {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr);\r\n        gap: 30px;\r\n        margin-top: 60px;\r\n        padding-top: 50px;\r\n        border-top: 1px solid rgba(255,255,255,0.05);\r\n    }\r\n\r\n    .pillar-item {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 15px;\r\n    }\r\n\r\n    .pillar-icon {\r\n        width: 45px;\r\n        height: 45px;\r\n        stroke: var(--gold);\r\n        stroke-width: 1.2;\r\n        fill: none;\r\n        transition: transform 0.5s ease;\r\n    }\r\n\r\n    .pillar-item:hover .pillar-icon {\r\n        transform: translateY(-5px) scale(1.1);\r\n    }\r\n\r\n    .pillar-item h4 {\r\n        font-size: 18px;\r\n        font-weight: 800;\r\n        margin: 0;\r\n        color: #fff !important;\r\n    }\r\n\r\n    .pillar-item p {\r\n        font-size: 14px;\r\n        color: #666 !important;\r\n        line-height: 1.6;\r\n        margin: 0;\r\n    }\r\n\r\n    \/* ---------------------------------\r\n       \u0627\u0644\u062c\u0627\u0646\u0628 \u0627\u0644\u0628\u0635\u0631\u064a (The Signature Image)\r\n       --------------------------------- *\/\r\n    .about-visual-side {\r\n        flex: 1;\r\n        position: sticky;\r\n        top: 50px;\r\n    }\r\n\r\n    .about-image-frame {\r\n        position: relative;\r\n        padding-inline-start: 40px; \/* \u0645\u0633\u0627\u062d\u0629 \u0644\u0644\u0628\u0631\u0648\u0627\u0632 \u0627\u0644\u0630\u0647\u0628\u064a *\/\r\n    }\r\n\r\n    .about-image-frame::after {\r\n        content: '';\r\n        position: absolute;\r\n        inset: 40px 0 0 0;\r\n        border: 1px solid var(--gold);\r\n        z-index: 1;\r\n        border-radius: 4px;\r\n    }\r\n\r\n    .about-img-wrap {\r\n        position: relative;\r\n        z-index: 2;\r\n        overflow: hidden;\r\n        border-radius: 4px;\r\n        box-shadow: 0 40px 80px rgba(0,0,0,0.6);\r\n        height: 650px;\r\n    }\r\n\r\n    .about-img-wrap img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1);\r\n    }\r\n\r\n    .about-image-frame:hover .about-img-wrap img {\r\n        transform: scale(1.1);\r\n    }\r\n\r\n    \/* ---------------------------------\r\n       \u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0627\u0644\u062c\u0648\u0627\u0644\r\n       --------------------------------- *\/\r\n    @media (max-width: 1100px) {\r\n        .about-container { flex-direction: column; gap: 60px; }\r\n        .about-visual-side { width: 100%; position: relative; top: 0; order: -1; }\r\n        .about-img-wrap { height: 450px; }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .iconic-about-wrap { padding: 80px 0; }\r\n        .about-container { padding: 0 25px; }\r\n        .about-pillars { grid-template-columns: 1fr; gap: 40px; }\r\n        .about-title { font-size: 32px; }\r\n        .about-image-frame { padding-inline-start: 20px; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"iconic-about-wrap\">\r\n    <div class=\"about-container\">\r\n        \r\n        <div class=\"about-text-side\">\r\n            <span class=\"about-tag\">About Iconic<\/span>\r\n            <h2 class=\"about-title\">\u0646\u0635\u0646\u0639 \u0645\u0633\u0627\u062d\u0627\u062a <br> \u062a\u062a\u0631\u062c\u0645 \u0647\u0648\u064a\u062a\u0643\u0645<\/h2>\r\n            \r\n            <div class=\"about-desc\">\r\n                \u0641\u0631\u064a\u0642 \u0645\u062a\u062e\u0635\u0635 \u0641\u064a \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u062f\u0627\u062e\u0644\u064a \u0648\u0627\u0644\u062e\u0627\u0631\u062c\u064a \u0648\u0627\u0644\u062a\u0634\u0637\u064a\u0628\u060c \u0646\u0642\u062f\u0645 \u062a\u0635\u0627\u0645\u064a\u0645 \u062a\u0639\u0643\u0633 \u0623\u0633\u0644\u0648\u0628 \u0627\u0644\u062d\u064a\u0627\u0629 \u0648\u062a\u062a\u0631\u062c\u0645 \u0647\u0648\u064a\u0629 \u0643\u0644 \u0645\u0633\u0627\u062d\u0629. <br><br>\r\n                <strong>\u0646\u062d\u0648\u0644 \u0627\u0644\u0623\u0641\u0643\u0627\u0631 \u0625\u0644\u0649 \u062a\u062c\u0627\u0631\u0628 \u0645\u0644\u0645\u0648\u0633\u0629<\/strong>\u060c \u0648\u0646\u0636\u064a\u0641 \u0644\u0645\u0633\u0629 \u0625\u0628\u062f\u0627\u0639\u064a\u0629 \u0644\u0644\u0648\u0627\u0642\u0639 \u0644\u0646\u062e\u0644\u0642 \u0645\u0633\u0627\u062d\u0627\u062a \u062a\u062c\u0645\u0639 \u0628\u064a\u0646 \u0627\u0644\u062c\u0645\u0627\u0644 \u0648\u0627\u0644\u0648\u0638\u064a\u0641\u0629. \u0645\u0646\u0630 \u0627\u0646\u0637\u0644\u0627\u0642\u062a\u0646\u0627\u060c \u0646\u062d\u0631\u0635 \u0639\u0644\u0649 \u062a\u0642\u062f\u064a\u0645 \u062d\u0644\u0648\u0644 \u062a\u0635\u0645\u064a\u0645\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u062a\u0628\u062f\u0623 \u0645\u0646 \u0627\u0644\u0641\u0643\u0631\u0629\u060c \u0648\u062a\u0645\u0631 \u0628\u0627\u0644\u0625\u0628\u062f\u0627\u0639 \u0648\u0627\u0644\u062a\u0635\u0645\u064a\u0645\u060c \u0648\u062a\u0646\u062a\u0647\u064a \u0628\u0627\u0644\u062a\u0646\u0641\u064a\u0630\u061b \u0644\u0646\u0628\u0646\u064a \u0645\u0633\u0627\u062d\u0627\u062a \u0633\u0643\u0646\u064a\u0629 \u0648\u062a\u062c\u0627\u0631\u064a\u0629 \u0648\u0639\u0627\u0645\u0629 \u0630\u0627\u062a \u0637\u0627\u0628\u0639 \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a \u064a\u0639\u0643\u0633 \u0637\u0645\u0648\u062d\u0627\u062a \u0639\u0645\u0644\u0627\u0626\u0646\u0627.\r\n            <\/div>\r\n\r\n            <div class=\"about-pillars\">\r\n                <div class=\"pillar-item\">\r\n                    <svg class=\"pillar-icon\" viewBox=\"0 0 24 24\"><path d=\"M9.663 17h4.674M12 3v1m8 8h1M3 12h1m12.354-6.354l.707-.707m-12.02 12.02l.707-.707m12.02 0l.707.707M6.344 6.344l.707.707M12 7a5 5 0 0 1 5 5c0 1.638-2.133 3.147-2.133 4.853a.853.853 0 0 1-.853.853l-4.028.001a.853.853 0 0 1-.853-.853C9.133 15.147 7 13.638 7 12a5 5 0 0 1 5-5z\"\/><\/svg>\r\n                    <h4>\u0627\u0644\u062a\u0641\u0643\u064a\u0631 \u0627\u0644\u0625\u0628\u062f\u0627\u0639\u064a<\/h4>\r\n                    <p>\u062d\u0644\u0648\u0644 \u0645\u0628\u062a\u0643\u0631\u0629 \u062e\u0627\u0631\u062c \u0627\u0644\u0635\u0646\u062f\u0648\u0642 \u0644\u0643\u0644 \u062a\u062d\u062f\u064a \u0645\u0639\u0645\u0627\u0631\u064a.<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"pillar-item\">\r\n                    <svg class=\"pillar-icon\" viewBox=\"0 0 24 24\"><path d=\"M4 8V4h4M4 16v4h4m8-4v4h4m0-12V4h-4M12 12v.01M9 12v.01M15 12v.01\"\/><\/svg>\r\n                    <h4>\u0627\u0644\u0627\u0647\u062a\u0645\u0627\u0645 \u0628\u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644<\/h4>\r\n                    <p>\u062f\u0642\u0629 \u0645\u062a\u0646\u0627\u0647\u064a\u0629 \u0641\u064a \u0643\u0644 \u0632\u0627\u0648\u064a\u0629\u060c \u0644\u0623\u0646 \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644 \u0647\u064a \u0627\u0644\u062c\u0645\u0627\u0644.<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"pillar-item\">\r\n                    <svg class=\"pillar-icon\" viewBox=\"0 0 24 24\"><path d=\"M9 12l2 2l4-4M12 3a12 12 0 0 0 8.5 3c0 7.333-2.833 11-8.5 15c-5.667-4-8.5-7.667-8.5-15a12 12 0 0 0 8.5-3\"\/><\/svg>\r\n                    <h4>\u0627\u0644\u0627\u0644\u062a\u0632\u0627\u0645 \u0648\u0627\u0644\u062c\u0648\u062f\u0629<\/h4>\r\n                    <p>\u0645\u0639\u0627\u064a\u064a\u0631 \u0639\u0627\u0644\u0645\u064a\u0629 \u0641\u064a \u0627\u0644\u062a\u0646\u0641\u064a\u0630 \u0648\u0627\u0644\u062a\u0632\u0627\u0645 \u062f\u0642\u064a\u0642 \u0628\u0627\u0644\u0645\u0648\u0627\u0639\u064a\u062f.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"about-visual-side\">\r\n            <div class=\"about-image-frame\">\r\n                <div class=\"about-img-wrap\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?q=80&w=1200&auto=format&fit=crop\" alt=\"Iconic Studio Team\/Work\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\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>\u062a\u0635\u0627\u0645\u064a\u0645 \u062a\u062a\u0631\u062c\u0645 \u0627\u0644\u0647\u0648\u064a\u0629 \u0623\u064a\u0643\u0648\u0646\u0643 \u062a\u062d\u0648\u0644 \u0627\u0644\u0623\u0641\u0643\u0627\u0631 \u0625\u0644\u0649 \u062a\u062c\u0627\u0631\u0628 \u0645\u0644\u0645\u0648\u0633\u0629 \u0645\u0646 \u062e\u0644\u0627\u0644 \u062a\u0635\u0645\u064a\u0645 \u062f\u0627\u062e\u0644\u064a \u0648\u062e\u0627\u0631\u062c\u064a \u0645\u062a\u0643\u0627\u0645\u0644 \u064a\u0639\u0643\u0633 \u0623\u0633\u0644\u0648\u0628 \u062d\u064a\u0627\u062a\u0643 \u0648\u064a\u0639\u0628\u0651\u0631 \u0639\u0646 \u0634\u062e\u0635\u064a\u062a\u0643 \u062a\u0635\u0641\u062d \u0645\u0634\u0627\u0631\u064a\u0639\u0646\u0627 +0 \u0645\u0634\u0631\u0648\u0639 \u0645\u0643\u062a\u0645\u0644 +0 \u0633\u0646\u0648\u0627\u062a \u062e\u0628\u0631\u0629 \u0641\u064a \u0627\u0644\u062a\u0635\u0645\u064a\u0645 +0 \u062a\u0635\u0645\u064a\u0645 \u0633\u0643\u0646\u064a \u0648\u062a\u062c\u0627\u0631\u064a \u0645\u0645\u064a\u0632 Iconic Solution Studio \u0644\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0639\u0645\u0627\u0631\u064a \u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629 \u0645\u0639\u0631\u0636 \u0627\u0644\u0623\u0639\u0645\u0627\u0644 01 \u062a\u0635\u0645\u064a\u0645 \u0633\u0643\u0646\u064a \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0633\u0643\u0646\u064a \u0646\u0642\u062f\u0645 \u062d\u0644\u0648\u0644\u0627\u064b \u062a\u0635\u0645\u064a\u0645\u064a\u0629 \u0644\u0644\u0645\u0633\u0627\u062d\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629\u060c [&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-34","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/iconicstudio.net\/en\/wp-json\/wp\/v2\/pages\/34","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iconicstudio.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iconicstudio.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iconicstudio.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iconicstudio.net\/en\/wp-json\/wp\/v2\/comments?post=34"}],"version-history":[{"count":166,"href":"https:\/\/iconicstudio.net\/en\/wp-json\/wp\/v2\/pages\/34\/revisions"}],"predecessor-version":[{"id":248,"href":"https:\/\/iconicstudio.net\/en\/wp-json\/wp\/v2\/pages\/34\/revisions\/248"}],"wp:attachment":[{"href":"https:\/\/iconicstudio.net\/en\/wp-json\/wp\/v2\/media?parent=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}