{"id":2,"date":"2026-01-03T16:01:57","date_gmt":"2026-01-03T16:01:57","guid":{"rendered":"https:\/\/hiekal.com\/v1\/?page_id=2"},"modified":"2026-01-03T22:23:00","modified_gmt":"2026-01-03T22:23:00","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/hiekal.com\/v1\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u0645\u0643\u062a\u0628 \u062d\u0633\u0646 \u0647\u064a\u0643\u0644 \u0644\u0644\u0645\u062d\u0627\u0633\u0628\u0629 \u0648\u0627\u0644\u0645\u0631\u0627\u062c\u0639\u0629<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n :root {\r\n --brand-dark: #20304c;\r\n --brand-cyan: #00c4cc;\r\n --bg-light: #f9fbfd;\r\n --text-grey: #4a5b70;\r\n }\r\n\r\n \/* General Reset *\/\r\n * { box-sizing: border-box; margin: 0; padding: 0; outline: none; }\r\n \r\n body { \r\n font-family: 'Tajawal', sans-serif; \r\n background-color: #fff; \r\n color: var(--brand-dark); \r\n line-height: 1.8; \r\n overflow-x: hidden; \r\n }\r\n\r\n img { max-width: 100%; height: auto; display: block; }\r\n a { text-decoration: none; color: inherit; transition: 0.3s; }\r\n \r\n \/* Layout System *\/\r\n .container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }\r\n .section { padding: 80px 0; }\r\n \r\n .row { \r\n display: flex; \r\n flex-wrap: wrap; \r\n margin: 0 -15px; \r\n align-items: center; \r\n }\r\n \r\n .col { padding: 0 15px; position: relative; }\r\n \r\n \/* Desktop Widths *\/\r\n .col-50 { flex: 0 0 50%; max-width: 50%; }\r\n .col-33 { flex: 0 0 33.33%; max-width: 33.33%; }\r\n \r\n \/* Typography *\/\r\n h2 { \r\n font-size: 36px; \r\n color: var(--brand-dark); \r\n text-align: center; \r\n margin-bottom: 60px; \r\n font-weight: 800; \r\n position: relative; \r\n }\r\n h2::after { \r\n content: ''; \r\n display: block; \r\n width: 80px; \r\n height: 4px; \r\n background-color: var(--brand-cyan); \r\n margin: 15px auto 0; \r\n border-radius: 2px; \r\n }\r\n \r\n h4 { font-size: 28px; color: var(--brand-dark); margin-bottom: 20px; font-weight: 800; }\r\n h5 { font-size: 18px; color: var(--brand-cyan); font-weight: 700; margin-bottom: 10px; display: block; }\r\n p { margin-bottom: 15px; font-size: 17px; font-weight: 500; color: var(--text-grey); }\r\n\r\n \/* Hero Section *\/\r\n .hero-section { \r\n position: relative; \r\n height: 600px; \r\n overflow: hidden; \r\n background: var(--brand-dark); \r\n color: #fff; \r\n display: flex; \r\n align-items: center; \r\n justify-content: center; \r\n text-align: center; \r\n }\r\n .hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; pointer-events: none; }\r\n .hero-slide.active { opacity: 1; z-index: 1; pointer-events: auto; }\r\n \r\n .hero-bg { \r\n position: absolute; top: 0; left: 0; width: 100%; height: 100%; \r\n background-size: cover; background-position: center; z-index: 0; transform: scale(1); \r\n background-color: #20304c; \r\n }\r\n \r\n @keyframes kenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.15); } }\r\n .hero-slide.active .hero-bg { animation: kenBurns 10s linear forwards; }\r\n \r\n .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(32, 48, 76, 0.7); z-index: 1; }\r\n \r\n .hero-content { \r\n position: relative; \r\n z-index: 2; \r\n max-width: 800px; \r\n padding: 20px; \r\n margin: 0 auto; \r\n top: 50%; \r\n transform: translateY(-50%); \r\n }\r\n .hero-content h1 { \r\n font-size: 48px; \r\n margin-bottom: 20px; \r\n line-height: 1.3; \r\n color: #ffffff; \r\n font-weight: 800; \r\n text-shadow: 0 4px 15px rgba(0,0,0,0.4); \r\n }\r\n .hero-content p { color: #f0f0f0; font-size: 20px; margin-bottom: 30px; }\r\n \r\n .hero-btn { \r\n display: inline-block; \r\n padding: 12px 35px; \r\n border: 2px solid #fff; \r\n color: #fff; \r\n text-transform: uppercase; \r\n font-weight: 700; \r\n transition: all 0.3s ease; \r\n cursor: pointer; \r\n border-radius: 4px; \r\n background: transparent; \r\n }\r\n .hero-btn:hover { background: var(--brand-cyan); border-color: var(--brand-cyan); transform: scale(1.05); }\r\n\r\n \/* About Section *\/\r\n .about-text { padding-left: 40px; text-align: right; }\r\n .about-img img { \r\n border-radius: 12px; \r\n box-shadow: 0 15px 40px rgba(0,0,0,0.15); \r\n transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); \r\n width: 100%;\r\n }\r\n .about-img img:hover { transform: scale(1.02); }\r\n\r\n \/* Services Section *\/\r\n .service-box { \r\n text-align: center; \r\n padding: 40px 25px; \r\n background: #fff; \r\n transition: all 0.4s ease; \r\n border-radius: 12px; \r\n border: 1px solid #eef2f5; \r\n height: 100%; \r\n display: block; \r\n box-shadow: 0 5px 15px rgba(0,0,0,0.02);\r\n }\r\n .service-box:hover { \r\n transform: translateY(-10px); \r\n box-shadow: 0 15px 40px rgba(0, 196, 204, 0.15); \r\n border-color: var(--brand-cyan); \r\n }\r\n .service-icon svg { width: 70px; height: 70px; margin-bottom: 25px; fill: var(--brand-cyan); transition: all 0.4s ease; }\r\n .service-box:hover .service-icon svg { transform: scale(1.1); fill: var(--brand-dark); }\r\n .service-title { font-size: 22px; color: var(--brand-dark); margin-bottom: 15px; font-weight: 800; }\r\n\r\n \/* Gallery Section *\/\r\n .gallery-grid { \r\n display: grid; \r\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); \r\n gap: 25px; \r\n }\r\n .gallery-item { \r\n position: relative; \r\n overflow: hidden; \r\n border-radius: 12px; \r\n box-shadow: 0 5px 15px rgba(0,0,0,0.05); \r\n cursor: pointer; \r\n aspect-ratio: 4\/3;\r\n }\r\n .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }\r\n .gallery-item:hover img { transform: scale(1.1); }\r\n \r\n \/* --- OPTIMIZED VIDEO SECTION CSS --- *\/\r\n .video-wrapper { \r\n position: relative; \r\n padding-bottom: 56.25%; \/* 16:9 Aspect Ratio *\/\r\n height: 0; \r\n border-radius: 12px; \r\n overflow: hidden; \r\n box-shadow: 0 10px 20px rgba(0,0,0,0.1); \r\n background: #20304c;\r\n margin-bottom: 30px;\r\n cursor: pointer;\r\n }\r\n \r\n \/* The thumbnail image *\/\r\n .video-thumb {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n opacity: 0.8;\r\n transition: opacity 0.3s;\r\n }\r\n .video-wrapper:hover .video-thumb { opacity: 0.5; }\r\n\r\n \/* The Play Button *\/\r\n .play-btn {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 60px;\r\n height: 60px;\r\n background: rgba(255,255,255,0.9);\r\n border-radius: 50%;\r\n z-index: 5;\r\n transition: all 0.3s;\r\n box-shadow: 0 0 0 0 rgba(255,255,255,0.7);\r\n }\r\n .play-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n left: 55%; \/* Slightly offset to look centered visually *\/\r\n transform: translate(-50%, -50%);\r\n border-style: solid;\r\n border-width: 10px 0 10px 18px;\r\n border-color: transparent transparent transparent var(--brand-cyan);\r\n }\r\n \r\n .video-wrapper:hover .play-btn {\r\n background: #fff;\r\n transform: translate(-50%, -50%) scale(1.1);\r\n box-shadow: 0 0 20px rgba(255,255,255,0.4);\r\n }\r\n \r\n .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }\r\n\r\n \/* Partners Section *\/\r\n .partners-track { \r\n display: flex; \r\n justify-content: flex-start; \r\n align-items: center; \r\n gap: 40px; \r\n overflow-x: auto; \r\n padding: 20px 10px; \r\n scroll-behavior: smooth; \r\n }\r\n .partner-logo { flex: 0 0 120px; opacity: 0.6; transition: all 0.3s ease; filter: grayscale(100%); }\r\n .partner-logo:hover { opacity: 1; filter: grayscale(0%); transform: scale(1.1); }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 991px) { .col-33 { flex: 0 0 50%; max-width: 50%; } }\r\n @media (max-width: 768px) {\r\n .section { padding: 50px 0; }\r\n .col-50, .col-33 { flex: 0 0 100%; max-width: 100%; margin-bottom: 30px; } \r\n .hero-content h1 { font-size: 32px; }\r\n .hero-content p { font-size: 18px; }\r\n .about-text { padding-left: 0; margin-bottom: 30px; text-align: center; }\r\n h2 { font-size: 28px; margin-bottom: 40px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Hero Slider -->\r\n <div class=\"hero-section\">\r\n <div class=\"hero-slide active\">\r\n <div class=\"hero-bg\" style=\"background-image: url('https:\/\/hiekal.com\/wp-content\/uploads\/2022\/10\/Untitl\u0633ed.png');\"><\/div>\r\n <div class=\"hero-overlay\"><\/div>\r\n <div class=\"hero-content\">\r\n <h1>\u0645\u0643\u062a\u0628 \u062d\u0633\u0646 \u0647\u064a\u0643\u0644 \u0644\u0644\u0645\u062d\u0627\u0633\u0628\u0629 \u0648\u0627\u0644\u0645\u0631\u0627\u062c\u0639\u0629<\/h1>\r\n <p>\u0645\u0624\u0633\u0633\u0629 \u0645\u0647\u0646\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629 \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0633\u0628\u0629 \u0648\u0627\u0644\u0645\u0631\u0627\u062c\u0639\u0629 \u0644\u0634\u0631\u0643\u0627\u062a \u0627\u0644\u0623\u0645\u0648\u0627\u0644 \u0648\u0634\u0631\u0643\u0627\u062a \u0627\u0644\u0623\u0634\u062e\u0627\u0635 \u0648\u0627\u0644\u0645\u0624\u0633\u0633\u0627\u062a<\/p>\r\n <a class=\"hero-btn\" href=\"https:\/\/hiekal.com\/v1\/\u0627\u062a\u0635\u0644-\u0628\u0646\u0627\/\">\u0627\u062a\u0635\u0644 \u0628\u0646\u0627<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hero-slide\">\r\n <div class=\"hero-bg\" style=\"background-image: url('https:\/\/hiekal.com\/wp-content\/uploads\/2022\/10\/319.png');\"><\/div>\r\n <div class=\"hero-overlay\"><\/div>\r\n <div class=\"hero-content\">\r\n <h1>\u062f\u0631\u0627\u0633\u0627\u062a \u0627\u0644\u062c\u062f\u0648\u0649 \u0627\u0644\u0625\u0642\u062a\u0635\u0627\u062f\u064a\u0629<\/h1>\r\n <p>\u0645\u062a\u062e\u0635\u0635\u0648\u0646 \u0641\u064a \u062f\u0631\u0627\u0633\u0627\u062a \u0627\u0644\u062c\u062f\u0648\u0649 \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629 \u0644\u0644\u0645\u0634\u0631\u0648\u0639\u0627\u062a \u0627\u0644\u0635\u0646\u0627\u0639\u064a\u0629 \u0648\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0627\u0626\u062a\u0645\u0627\u0646\u064a \u0644\u0644\u0628\u0646\u0648\u0643<\/p>\r\n <a class=\"hero-btn\" href=\"https:\/\/hiekal.com\/v1\/\u062e\u062f\u0645\u0627\u062a\u0646\u0627\/\">\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hero-slide\">\r\n <div class=\"hero-bg\" style=\"background-image: url('https:\/\/hiekal.com\/wp-content\/uploads\/2023\/08\/\u0639\u0644\u0649-\u0645\u0633\u0626\u0648\u0644\u064a\u062a\u064a-\u0645\u0648\u0627\u0637\u0646\u0648\u0646-\u0636\u062f-\u0627\u0644\u063a\u0644\u0627\u0621-_-\u0627\u0644\u0645\u0633\u062a\u0647\u0644\u0643-\u0645\u0634-\u0642\u0627\u062f\u0631-\u064a\u0639\u064a\u0634-1-26-screenshot.png');\"><\/div>\r\n <div class=\"hero-overlay\"><\/div>\r\n <div class=\"hero-content\">\r\n <h1>\u0645\u0643\u062a\u0628 \u0647\u064a\u0643\u0644 \u0648\u0634\u0631\u0643\u0627\u0647 \u0645\u0639\u062a\u0645\u062f \u0639\u0627\u0644\u0645\u064a\u0627\u064b<\/h1>\r\n <p>\u062a\u0645 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0627\u0633\u062a\u0627\u0630 \/ \u062d\u0633\u0646 \u0647\u064a\u0643\u0644 \u0645\u0633\u062a\u0634\u0627\u0631\u0627 \u0636\u0631\u064a\u0628\u064a\u0627 \u0644\u062c\u0645\u0639\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u062b\u0645\u0631\u064a\u0646 \u0628\u062f\u0645\u064a\u0627\u0637<\/p>\r\n <a class=\"hero-btn\" href=\"https:\/\/hiekal.com\/v1\/\u0627\u062a\u0635\u0644-\u0628\u0646\u0627\/\">\u0627\u062a\u0635\u0644 \u0628\u0646\u0627<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- About Section -->\r\n <section class=\"section\">\r\n <div class=\"container\">\r\n <div class=\"row\">\r\n <div class=\"col col-50\">\r\n <div class=\"about-text\">\r\n <h5>\u0645\u0646 \u0646\u062d\u0646<\/h5>\r\n <h4>\u0645\u0643\u062a\u0628 \u062d\u0633\u0646 \u0647\u064a\u0643\u0644<\/h4>\r\n <p><strong>\u062e\u0645\u0633\u0629 \u0648\u062b\u0644\u0627\u062b\u0648\u0646 \u0639\u0627\u0645\u0627 \u0645\u0646 \u0627\u0644\u062e\u0628\u0631\u0629 \u0628\u064a\u0646 \u064a\u062f\u064a\u0643<\/strong><\/p>\r\n <p>\u0645\u0624\u0633\u0633\u0629 \u0645\u0647\u0646\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629 \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0633\u0628\u0629 \u0648\u0627\u0644\u0645\u0631\u0627\u062c\u0639\u0629 \u0644\u0634\u0631\u0643\u0627\u062a \u0627\u0644\u0623\u0645\u0648\u0627\u0644 \u0648\u0634\u0631\u0643\u0627\u062a \u0627\u0644\u0623\u0634\u062e\u0627\u0635 \u0648\u0627\u0644\u0645\u0624\u0633\u0633\u0627\u062a \u0648\u0627\u0644\u062c\u0645\u0639\u064a\u0627\u062a \u063a\u064a\u0631 \u0627\u0644\u0647\u0627\u062f\u0641\u0629 \u0644\u0644\u0631\u0628\u062d \u0648\u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u062d\u0631\u0629 \u0627\u0644\u0639\u0627\u0645\u0629 \u0648\u0627\u0644\u062e\u0627\u0635\u0629.<\/p>\r\n <p>\u062a\u0642\u062f\u0645 \u062a\u0642\u0627\u0631\u064a\u0631\u0647\u0627 \u0627\u0644\u0645\u0639\u062a\u0645\u062f\u0629 \u0644\u0644\u0639\u062f\u064a\u062f \u0645\u0646 \u0627\u0644\u062c\u0647\u0627\u062a \u0627\u0644\u062f\u0648\u0644\u064a\u0629 \u0627\u0644\u0643\u0628\u0631\u0649 \u0645\u0646\u0647\u0627:<br>\r\n - Misereor \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629<br>\r\n - Kindermissionwerk<br>\r\n - \u0627\u0644\u0627\u062a\u062d\u0627\u062f \u0627\u0644\u0623\u0648\u0631\u0648\u0628\u064a<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"col col-50 about-img\">\r\n <img decoding=\"async\" src=\"https:\/\/hiekal.com\/wp-content\/uploads\/2022\/10\/Untitled.png\" alt=\"About Hiekal Office\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Services Section -->\r\n <section class=\"section\" style=\"background-color: var(--bg-light);\">\r\n <div class=\"container\">\r\n <h2>\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/h2>\r\n <div class=\"row\">\r\n <div class=\"col col-33\">\r\n <a href=\"https:\/\/hiekal.com\/v1\/\u062e\u062f\u0645\u0627\u062a\u0646\u0627\/\" class=\"service-box\">\r\n <div class=\"service-icon\">\r\n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"\/><path d=\"M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"service-title\">\u0627\u0644\u0645\u0631\u0627\u062c\u0639\u0629<\/div>\r\n <p>\u0625\u062c\u0631\u0627\u0621 \u0639\u0645\u0644\u064a\u0627\u062a \u0627\u0644\u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u0634\u0627\u0645\u0644\u0629 \u0648\u0627\u0644\u0645\u062d\u062f\u0648\u062f\u0629 \u0648\u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u0644\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0633\u0644\u0627\u0645\u0629 \u0627\u0644\u0642\u0648\u0627\u0626\u0645 \u0627\u0644\u0645\u0627\u0644\u064a\u0629.<\/p>\r\n <\/a>\r\n <\/div>\r\n <div class=\"col col-33\">\r\n <a href=\"https:\/\/hiekal.com\/v1\/\u062e\u062f\u0645\u0627\u062a\u0646\u0627\/\" class=\"service-box\">\r\n <div class=\"service-icon\">\r\n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"service-title\">\u062f\u0631\u0627\u0633\u0627\u062a \u0627\u0644\u062c\u062f\u0648\u0649<\/div>\r\n <p>\u0645\u062a\u062e\u0635\u0635\u0648\u0646 \u0641\u064a \u062f\u0631\u0627\u0633\u0627\u062a \u0627\u0644\u062c\u062f\u0648\u0649 \u0627\u0644\u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629 \u0644\u0644\u0645\u0634\u0631\u0648\u0639\u0627\u062a \u0627\u0644\u0635\u0646\u0627\u0639\u064a\u0629 \u0648\u0627\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0627\u0626\u062a\u0645\u0627\u0646\u064a \u0644\u0644\u0628\u0646\u0648\u0643.<\/p>\r\n <\/a>\r\n <\/div>\r\n <div class=\"col col-33\">\r\n <a href=\"https:\/\/hiekal.com\/v1\/\u062e\u062f\u0645\u0627\u062a\u0646\u0627\/\" class=\"service-box\">\r\n <div class=\"service-icon\">\r\n <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z\"\/><path d=\"M7 7h10v2H7zm0 4h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"service-title\">\u0627\u0644\u0636\u0631\u0627\u0626\u0628<\/div>\r\n <p>\u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0627\u0633\u062a\u0634\u0627\u0631\u0627\u062a \u0648\u0627\u0644\u0631\u062f \u0639\u0644\u064a \u0627\u0644\u0627\u0633\u062a\u0641\u0633\u0627\u0631\u0627\u062a \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0627\u0644\u0627\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0627\u0644\u064a\u0629 \u0648\u0627\u0644\u0636\u0631\u0627\u0626\u0628 \u0628\u0623\u0646\u0648\u0627\u0639\u0647\u0627.<\/p>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Gallery Section -->\r\n <section class=\"section\">\r\n <div class=\"container\">\r\n <h2>\u0645\u0639\u0631\u0636 \u0627\u0644\u0635\u0648\u0631<\/h2>\r\n <div class=\"gallery-grid\">\r\n <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/hiekal.com\/wp-content\/uploads\/2022\/10\/12801666_10208737650268519_8625122336223378282_n-768x576.jpg\" alt=\"Gallery 1\"><\/div>\r\n <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/hiekal.com\/wp-content\/uploads\/2022\/10\/images5-768x576.jpg\" alt=\"Gallery 2\"><\/div>\r\n <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/hiekal.com\/wp-content\/uploads\/2022\/10\/images6-768x576.jpg\" alt=\"Gallery 3\"><\/div>\r\n <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/hiekal.com\/wp-content\/uploads\/2022\/10\/img2-768x576.jpg\" alt=\"Gallery 4\"><\/div>\r\n <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/hiekal.com\/wp-content\/uploads\/2022\/10\/index-768x576.jpg\" alt=\"Gallery 5\"><\/div>\r\n <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/hiekal.com\/wp-content\/uploads\/2022\/10\/319-768x576.png\" alt=\"Gallery 6\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- OPTIMIZED Video Section -->\r\n <section class=\"section\" style=\"background-color: var(--bg-light);\">\r\n <div class=\"container\">\r\n <h2>\u0645\u0642\u0627\u0628\u0644\u0627\u062a \u062a\u0644\u0641\u0632\u064a\u0648\u0646\u064a\u0629<\/h2>\r\n <div class=\"row\">\r\n <!-- Video 1 -->\r\n <div class=\"col col-33\">\r\n <div class=\"video-wrapper lazy-load-video\" data-video-id=\"29k4yg4XW1I\">\r\n <div class=\"play-btn\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Video 2 -->\r\n <div class=\"col col-33\">\r\n <div class=\"video-wrapper lazy-load-video\" data-video-id=\"29k4yg4XW1I\">\r\n <div class=\"play-btn\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Video 3 -->\r\n <div class=\"col col-33\">\r\n <div class=\"video-wrapper lazy-load-video\" data-video-id=\"-rqPaNK4zpQ\">\r\n <div class=\"play-btn\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Video 4 -->\r\n <div class=\"col col-33\">\r\n <div class=\"video-wrapper lazy-load-video\" data-video-id=\"JVObo3odoWY\">\r\n <div class=\"play-btn\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Video 5 -->\r\n <div class=\"col col-33\">\r\n <div class=\"video-wrapper lazy-load-video\" data-video-id=\"RUW-wccgwJo\">\r\n <div class=\"play-btn\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Video 6 -->\r\n <div class=\"col col-33\">\r\n <div class=\"video-wrapper lazy-load-video\" data-video-id=\"qKXMp6gIbXg\">\r\n <div class=\"play-btn\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Partners \/ Links Section -->\r\n <section class=\"section\">\r\n <div class=\"container\">\r\n <h2><a href=\"https:\/\/hiekal.com\/v1\/\u0645\u0648\u0627\u0642\u0639-\u0648-\u0631\u0648\u0627\u0628\u0637-\u0647\u0627\u0645\u0647\/\" style=\"text-decoration:none; color:inherit;\">\u0631\u0648\u0627\u0628\u0637 \u0645\u0647\u0645\u0629<\/a><\/h2>\r\n <div class=\"partners-track\">\r\n <a href=\"#\" class=\"partner-logo\"><img decoding=\"async\" src=\"https:\/\/hiekal.com\/wp-content\/uploads\/2022\/10\/index-1-150x150.png\" alt=\"Partner\"><\/a>\r\n <a href=\"#\" class=\"partner-logo\"><img decoding=\"async\" src=\"https:\/\/hiekal.com\/wp-content\/uploads\/2022\/10\/192790895_144963797658685_653232490589576826_n-150x150.png\" alt=\"Partner\"><\/a>\r\n <a href=\"#\" class=\"partner-logo\"><img decoding=\"async\" src=\"https:\/\/hiekal.com\/wp-content\/uploads\/2022\/10\/20210918050820820-150x150.png\" alt=\"Partner\"><\/a>\r\n <a href=\"#\" class=\"partner-logo\"><img decoding=\"async\" src=\"https:\/\/hiekal.com\/wp-content\/uploads\/2022\/10\/index25-1-150x150.png\" alt=\"Partner\"><\/a>\r\n <a href=\"#\" class=\"partner-logo\"><img decoding=\"async\" src=\"https:\/\/hiekal.com\/wp-content\/uploads\/2022\/10\/index4-150x150.png\" alt=\"Partner\"><\/a>\r\n <a href=\"#\" class=\"partner-logo\"><img decoding=\"async\" src=\"https:\/\/hiekal.com\/wp-content\/uploads\/2022\/10\/download-1-150x150.png\" alt=\"Partner\"><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \r\n \/\/ Hero Slider Logic\r\n let slides = document.querySelectorAll('.hero-slide');\r\n if(slides.length > 0) {\r\n let currentSlide = 0;\r\n const slideInterval = 5000;\r\n function nextSlide() {\r\n slides[currentSlide].classList.remove('active');\r\n currentSlide = (currentSlide + 1) % slides.length;\r\n slides[currentSlide].classList.add('active');\r\n }\r\n setInterval(nextSlide, slideInterval);\r\n }\r\n\r\n \/\/ Video Lazy Load Logic\r\n const lazyVideos = document.querySelectorAll('.lazy-load-video');\r\n lazyVideos.forEach(function(wrapper) {\r\n const videoId = wrapper.getAttribute('data-video-id');\r\n \r\n \/\/ 1. Create Thumbnail Image automatically (Lightweight)\r\n const thumbImg = document.createElement('img');\r\n thumbImg.src = `https:\/\/img.youtube.com\/vi\/${videoId}\/hqdefault.jpg`;\r\n thumbImg.className = 'video-thumb';\r\n thumbImg.alt = 'Video Thumbnail';\r\n \r\n \/\/ Insert thumbnail before the play button\r\n wrapper.insertBefore(thumbImg, wrapper.firstChild);\r\n \r\n \/\/ 2. Add Click Event (Heavy video only loads here)\r\n wrapper.addEventListener('click', function() {\r\n \/\/ Create iframe\r\n const iframe = document.createElement('iframe');\r\n \/\/ \"autoplay=1\" ensures it plays immediately after loading\r\n iframe.setAttribute('src', `https:\/\/www.youtube.com\/embed\/${videoId}?autoplay=1&rel=0`);\r\n iframe.setAttribute('frameborder', '0');\r\n iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');\r\n iframe.setAttribute('allowfullscreen', '');\r\n \r\n \/\/ Clear the wrapper (remove image and play button) and add iframe\r\n wrapper.innerHTML = '';\r\n wrapper.appendChild(iframe);\r\n });\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\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>\u0645\u0643\u062a\u0628 \u062d\u0633\u0646 \u0647\u064a\u0643\u0644 \u0644\u0644\u0645\u062d\u0627\u0633\u0628\u0629 \u0648\u0627\u0644\u0645\u0631\u0627\u062c\u0639\u0629 \u0645\u0643\u062a\u0628 \u062d\u0633\u0646 \u0647\u064a\u0643\u0644 \u0644\u0644\u0645\u062d\u0627\u0633\u0628\u0629 \u0648\u0627\u0644\u0645\u0631\u0627\u062c\u0639\u0629 \u0645\u0624\u0633\u0633\u0629 \u0645\u0647\u0646\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629 \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0633\u0628\u0629 \u0648\u0627\u0644\u0645\u0631\u0627\u062c\u0639\u0629 \u0644\u0634\u0631\u0643\u0627\u062a \u0627\u0644\u0623\u0645\u0648\u0627\u0644 \u0648\u0634\u0631\u0643\u0627\u062a \u0627\u0644\u0623\u0634\u062e\u0627\u0635 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hiekal.com\/v1\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hiekal.com\/v1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hiekal.com\/v1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hiekal.com\/v1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hiekal.com\/v1\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":40,"href":"https:\/\/hiekal.com\/v1\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":140,"href":"https:\/\/hiekal.com\/v1\/wp-json\/wp\/v2\/pages\/2\/revisions\/140"}],"wp:attachment":[{"href":"https:\/\/hiekal.com\/v1\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}