{"id":1062,"date":"2025-12-11T10:35:16","date_gmt":"2025-12-11T10:35:16","guid":{"rendered":"https:\/\/hotlinezutr.top\/?page_id=1062"},"modified":"2026-04-12T14:14:45","modified_gmt":"2026-04-12T14:14:45","slug":"courses","status":"publish","type":"page","link":"https:\/\/roeyaacademy.com\/ar\/courses\/","title":{"rendered":"Courses"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1062\" class=\"elementor elementor-1062\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3391cb4 e-con-full e-flex e-con e-parent\" data-id=\"3391cb4\" data-element_type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3334d28 elementor-widget elementor-widget-html\" data-id=\"3334d28\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<!-- Fonts -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&family=Tajawal:wght@500;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n  \/* 1. THEME VARIABLES *\/\r\n  :root {\r\n    \/* --- Variables from Home --- *\/\r\n    --roeya-blue: #232d50;\r\n    --roeya-blue-dark: #153070;\r\n    --roeya-gold: #c8ac82;\r\n    --roeya-gold-light: #e6ceaa;\r\n    --roeya-gold-dark: #b09670; \r\n    --white: #ffffff;\r\n    --light-gray: #f9fafb;\r\n    --gray-text: #4b5563;\r\n    --container-max-width: 1200px;\r\n    --gap: 60px;\r\n    --radius: 12px;\r\n    --shadow: 0 10px 30px rgba(0,0,0,0.06);\r\n    --font-main: 'Tajawal', sans-serif;\r\n  }\r\n\r\n  \/* --- GLOBAL RESET --- *\/\r\n  .roeya-archive-wrapper {\r\n    width: 100%;\r\n    font-family: var(--font-main);\r\n    color: var(--roeya-blue);\r\n    line-height: 1.6;\r\n    background: var(--white);\r\n    overflow-x: hidden;\r\n    box-sizing: border-box;\r\n    -webkit-text-size-adjust: 100%;\r\n    direction: rtl; \/* Ensure RTL flow *\/\r\n    text-align: right; \/* Default text align right *\/\r\n  }\r\n\r\n  \/* --- ISOLATION & RESET --- *\/\r\n  \/* Prevent external styles from affecting box-sizing and margins *\/\r\n  .roeya-archive-wrapper *, .roeya-archive-wrapper *::before, .roeya-archive-wrapper *::after {\r\n    box-sizing: border-box;\r\n  }\r\n  .roeya-archive-wrapper h1, .roeya-archive-wrapper h2, .roeya-archive-wrapper h3, .roeya-archive-wrapper p { margin-top: 0; }\r\n\r\n  \/* --- LINK STYLING --- *\/\r\n  .roeya-archive-wrapper a {\r\n    color: var(--roeya-blue);\r\n    text-decoration: none !important; \/* Override Elementor\/Theme link styles *\/\r\n    transition: color 0.2s ease;\r\n    box-shadow: none !important;\r\n  }\r\n  .roeya-archive-wrapper a:hover {\r\n    color: var(--roeya-gold);\r\n  }\r\n\r\n  \/* Ken Burns Animation *\/\r\n  @keyframes kenBurnsLoopCourses {\r\n    0% { transform: scale(1); }\r\n    50% { transform: scale(1.15); } \r\n    100% { transform: scale(1); }\r\n  }\r\n\r\n  \/* --- HERO SECTION --- *\/\r\n  .roeya-hero {\r\n    position: relative;\r\n    width: 100vw; \r\n    margin-right: calc(50% - 50vw); \/* Adjusted for RTL center calculation *\/\r\n    margin-left: calc(50% - 50vw);\r\n    min-height: 450px; \r\n    background-color: var(--roeya-blue); \r\n    display: flex;\r\n    align-items: center; \r\n    justify-content: flex-start;\r\n    overflow: hidden;\r\n    margin-bottom: 60px;\r\n    padding: 60px 0;\r\n  }\r\n\r\n  .roeya-hero-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    background-image: url('https:\/\/roeyaacademy.com\/ar\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-12-at-12.11.30-1.jpeg');\r\n    background-size: cover;\r\n    background-position: center;\r\n    z-index: 0;\r\n    animation: kenBurnsLoopCourses 40s infinite ease-in-out;\r\n  }\r\n\r\n  \/* Dark Blue Gradient Overlay - FLIPPED FOR ARABIC (Dark on Right) *\/\r\n  .roeya-hero-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    \/* Updated to match brand colors more closely *\/\r\n    background: linear-gradient(270deg, rgba(35, 45, 80, 0.95) 0%, rgba(35, 45, 80, 0.85) 60%, rgba(35, 45, 80, 0.7) 100%);\r\n    z-index: 1;\r\n  }\r\n\r\n  .roeya-hero-container {\r\n    position: relative;\r\n    z-index: 2;\r\n    max-width: var(--container-max-width);\r\n    width: 100%;\r\n    margin: 0 auto;\r\n    padding: 0 20px;\r\n    text-align: right !important; \/* Force align text to right *\/\r\n  }\r\n\r\n  \/* Breadcrumb *\/\r\n  .roeya-hero-breadcrumb {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    background: rgba(255, 255, 255, 0.1);\r\n    border: 1px solid rgba(255, 255, 255, 0.2);\r\n    border-radius: 50px;\r\n    padding: 8px 20px;\r\n    margin-bottom: 24px;\r\n    font-family: var(--font-main);\r\n    font-size: 0.9rem; \/* Slightly larger for Arabic legibility *\/\r\n    font-weight: 700;\r\n    letter-spacing: 0; \/* REMOVED letter-spacing for Arabic *\/\r\n    color: var(--roeya-gold-light);\r\n    backdrop-filter: blur(4px);\r\n  }\r\n  \r\n  .roeya-hero-breadcrumb span { opacity: 0.9; }\r\n  .roeya-hero-breadcrumb .current { opacity: 1; color: #fff; }\r\n  .roeya-hero-breadcrumb a { color: inherit !important; }\r\n\r\n  \/* Hero Title *\/\r\n  .roeya-hero-title {\r\n    font-family: var(--font-main);\r\n    font-size: 2.75rem;\r\n    font-weight: 800;\r\n    color: #ffffff;\r\n    margin: 0 0 16px 0;\r\n    line-height: 1.2;\r\n  }\r\n\r\n  \/* Hero Desc *\/\r\n  .roeya-hero-desc {\r\n    font-family: var(--font-main);\r\n    font-size: 1.1rem;\r\n    color: var(--light-gray); \r\n    line-height: 1.7;\r\n    max-width: 650px;\r\n    margin: 0; \r\n  }\r\n\r\n  \/* --- GRID & CARDS (FROM HOME) --- *\/\r\n  .roeya-body-container {\r\n    max-width: var(--container-max-width);\r\n    margin: 0 auto;\r\n    padding: 0 20px;\r\n    padding-bottom: 80px;\r\n  }\r\n\r\n  .roeyaWrap7 { max-width: 1200px; margin: 0 auto; }\r\n  .roeyaGrid7 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; }\r\n  .roeyaCard7 {\r\n    background: #ffffff; border: 1px solid #f1f2f3; border-radius: 12px;\r\n    overflow: hidden; display: flex; flex-direction: column; transition: all 0.6s ease;\r\n  }\r\n  .roeyaCard7:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); border-color: transparent; }\r\n  .roeyaImg7 { height: 220px; overflow: hidden; position: relative; background-color: #eee; }\r\n  .roeyaImg7 img { width: 100%; height: 100%; object-fit: cover; } \r\n  .roeyaBody7 { padding: 24px 24px 10px 24px; display: flex; flex-direction: column; flex: 1; }\r\n  .roeyaCat7 { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: #c8ac82; text-transform: uppercase; margin-bottom: 8px; }\r\n  .roeyaTitle7 { font-size: 1.2rem; font-weight: 700; color: #232d50; line-height: 1.3; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }\r\n  .roeyaDesc7 { font-size: 0.9rem; line-height: 1.6; color: #6b7280; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 15px; }\r\n  .roeyaDivider7 { height: 1px; background: #f1f2f3; margin: 10px 0 0; width: 100%; }\r\n  .roeyaBottom7 { padding: 16px 24px 24px 24px; display: flex; align-items: center; justify-content: space-between; }\r\n  \r\n  .roeyaPrice7 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1.2; }\r\n  \r\n  .roeyaOld7 { \r\n    font-size: 1.2rem; \r\n    font-weight: 700; \r\n    color: #232d50; \r\n    display: inline-flex; \r\n    align-items: center; \r\n    gap: 5px; \r\n    text-decoration: none; \r\n  }\r\n\r\n  .roeyaOldVal {\r\n    position: relative;\r\n    display: inline-block;\r\n    z-index: 1;\r\n  }\r\n\r\n  .roeyaOldVal::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 50%;\r\n    right: -5%; \r\n    width: 110%; \r\n    height: 3px; \r\n    background-color: #ef4444; \r\n    transform: translateY(-50%) rotate(20deg); \r\n    opacity: 0.9;\r\n    pointer-events: none;\r\n  }\r\n  \r\n  .roeyaNew7 { font-size: 1.2rem; font-weight: 800; color: #232d50; display: inline-flex; align-items: center; }\r\n  .roeyaCurr7 { font-size: 0.75rem; font-weight: 700; margin-right: 4px; color: #232d50; }\r\n\r\n  .roeyaBtn7 {\r\n    background: var(--roeya-blue) !important;\r\n    color: #ffffff !important; \r\n    border: none; \r\n    padding: 10px 24px; \r\n    border-radius: 50px; \r\n    font-size: 0.85rem; font-weight: 700; \r\n    cursor: pointer; \r\n    transition: all 0.4s ease; \r\n    white-space: nowrap;\r\n  }\r\n  .roeyaBtn7:hover { \r\n    background: var(--roeya-blue) !important;\r\n    color: #c9a87f !important;\r\n    transform: translateY(-2px); \r\n  }\r\n  \r\n  .roeyaLink7 { text-decoration: none; color: inherit; }\r\n  .roeyaSkel7 {\r\n    height: 400px; border-radius: 12px;\r\n    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 40%, #f1f5f9 80%);\r\n    background-size: 200% 100%; animation: roeyaSkelAnim7 2.4s infinite linear;\r\n  }\r\n  @keyframes roeyaSkelAnim7 { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }\r\n\r\n  .archive-loader {\r\n    grid-column: 1\/-1;\r\n    text-align: center;\r\n    padding: 60px;\r\n    font-size: 1.2rem;\r\n    color: var(--gray-text);\r\n    border: 2px dashed #cbd5e1;\r\n    border-radius: 12px;\r\n  }\r\n\r\n  @media (max-width: 1024px) {\r\n    .roeyaGrid7 { grid-template-columns: repeat(2, 1fr); }\r\n  }\r\n  @media (max-width: 767px) {\r\n    .roeya-hero { height: auto; min-height: 350px; padding: 40px 0; }\r\n    .roeya-hero-container { text-align: right; } \r\n    .roeya-hero-breadcrumb { justify-content: flex-start; }\r\n    .roeya-hero-desc { margin: 0; }\r\n    .roeyaGrid7 { grid-template-columns: 1fr; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"roeya-archive-wrapper\">\r\n  \r\n  <!-- HERO SECTION -->\r\n  <div class=\"roeya-hero\">\r\n    <div class=\"roeya-hero-bg\" id=\"heroBg\"><\/div>\r\n    <div class=\"roeya-hero-overlay\"><\/div>\r\n    \r\n    <div class=\"roeya-hero-container\">\r\n      <div class=\"roeya-hero-breadcrumb\">\r\n        <span>\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/span>\r\n        <!-- Changed to chevron-left for logic flow in RTL -->\r\n        <i class=\"fa-solid fa-chevron-left\" style=\"font-size: 0.6em;\"><\/i>\r\n        <span class=\"current\" id=\"breadcrumbName\">\u0627\u0644\u062f\u0648\u0631\u0627\u062a<\/span>\r\n      <\/div>\r\n      <h1 class=\"roeya-hero-title\" id=\"heroTitle\">\u062c\u0627\u0631\u064a \u0627\u0644\u062a\u062d\u0645\u064a\u0644...<\/h1>\r\n      <p class=\"roeya-hero-desc\" id=\"heroDesc\"><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- COURSE GRID -->\r\n  <div class=\"roeya-body-container\">\r\n    <div class=\"roeyaWrap7\">\r\n      <div class=\"roeyaGrid7\" id=\"archiveGrid\">\r\n        <div class=\"roeyaSkel7\"><\/div>\r\n        <div class=\"roeyaSkel7\"><\/div>\r\n        <div class=\"roeyaSkel7\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  \r\n  \/\/ Ensure we are fetching from the Arabic endpoint\r\n  const BASE_API = \"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\";\r\n  const grid = document.getElementById('archiveGrid');\r\n  const heroTitle = document.getElementById('heroTitle');\r\n  const heroDesc = document.getElementById('heroDesc');\r\n  const breadcrumbName = document.getElementById('breadcrumbName');\r\n\r\n  const getCurrentSlug = () => {\r\n    \/\/ This logic stays the same, grabs the last part of URL\r\n    const parts = window.location.pathname.split('\/').filter(p => p);\r\n    return parts[parts.length - 1];\r\n  };\r\n\r\n  const clean = t => (t || \"\").replace(\/<[^>]*>\/g,\"\").trim();\r\n\r\n  \/\/ Price Generator (Home grid style)\r\n  const getPriceHTML = (c) => {\r\n    const riyalImg = `<img decoding=\"async\" src=\"https:\/\/roeyaacademy.com\/ar\/wp-content\/uploads\/2026\/01\/Saudi_Riyal_Symbol.svg.png\" style=\"height:20px;vertical-align:middle;display:inline;width:auto;\" alt=\"\u0631\u064a\u0627\u0644\">`;\r\n\r\n    const formatPrice = (p) => {\r\n      const v = String(p ?? \"\").trim();\r\n      if (!v) return \"\";\r\n      const n = Number(v.replace(\/[^\\d.]\/g, \"\"));\r\n      return Number.isFinite(n) ? String(Math.round(n)) : v;\r\n    };\r\n\r\n    \/\/ 1. Check ACF Price\r\n    if (c.acf && c.acf.price) {\r\n      const p = formatPrice(c.acf.price);\r\n      return `<div class=\"roeyaPrice7\"><div class=\"roeyaNew7\">${p}<span class=\"roeyaCurr7\">${riyalImg}<\/span><\/div><\/div>`;\r\n    }\r\n\r\n    \/\/ 2. Check Standard WP Meta\r\n    const regular = c.meta?.regular_price || \"\";\r\n    const discount = c.meta?.discount_price || \"\";\r\n\r\n    if (discount) {\r\n      const r = formatPrice(regular); \r\n      const d = formatPrice(discount); \r\n      return `\r\n        <div class=\"roeyaPrice7\">\r\n          <div class=\"roeyaOld7\"><span class=\"roeyaOldVal\">${r}<\/span>${riyalImg}<\/div>\r\n          <div class=\"roeyaNew7\">${d}<span class=\"roeyaCurr7\">${riyalImg}<\/span><\/div>\r\n        <\/div>`;\r\n    } else if (regular) {\r\n      const r = formatPrice(regular);\r\n      return `<div class=\"roeyaPrice7\"><div class=\"roeyaNew7\">${r}<span class=\"roeyaCurr7\">${riyalImg}<\/span><\/div><\/div>`;\r\n    }\r\n\r\n    return `<div class=\"roeyaPrice7\"><div class=\"roeyaNew7\">\u2014<\/div><\/div>`;\r\n  };\r\n\r\n  const courseCardHTML = (c, catName) => {\r\n    const title = clean(c.title?.rendered);\r\n    let excerpt = clean(c.excerpt?.rendered);\r\n    if (!excerpt) excerpt = \"\u0627\u0633\u062a\u0643\u0634\u0641 \u0647\u0630\u0647 \u0627\u0644\u062f\u0648\u0631\u0629 \u0644\u0645\u0639\u0631\u0641\u0629 \u0627\u0644\u0645\u0632\u064a\u062f \u0639\u0646 \u0627\u0644\u0645\u0646\u0647\u062c \u0648\u0627\u0644\u0645\u062e\u0631\u062c\u0627\u062a \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629.\";\r\n\r\n    const link = c.link || \"#\";\r\n    \r\n    \/\/ Featured Image Logic\r\n    const img = c._embedded?.[\"wp:featuredmedia\"]?.[0]?.media_details?.sizes?.medium_large?.source_url\r\n      || c._embedded?.[\"wp:featuredmedia\"]?.[0]?.source_url\r\n      || \"https:\/\/via.placeholder.com\/600x400\/f1f5f9\/64748b?text=Roeya+Academy\";\r\n\r\n    return `\r\n      <article class=\"roeyaCard7\">\r\n        <div class=\"roeyaImg7\">\r\n          <a class=\"roeyaLink7\" href=\"${link}\" style=\"display:block; height:100%;\" aria-label=\"${title}\">\r\n            <img decoding=\"async\" src=\"${img}\" alt=\"${title}\" loading=\"lazy\">\r\n          <\/a>\r\n        <\/div>\r\n        <div class=\"roeyaBody7\">\r\n          ${catName ? `<div class=\"roeyaCat7\">${catName}<\/div>` : \"\"}\r\n          <h3 class=\"roeyaTitle7\"><a class=\"roeyaLink7\" href=\"${link}\">${title}<\/a><\/h3>\r\n          <p class=\"roeyaDesc7\">${excerpt}<\/p>\r\n          <div class=\"roeyaDivider7\"><\/div>\r\n        <\/div>\r\n        <div class=\"roeyaBottom7\">\r\n          ${getPriceHTML(c)}\r\n          <a class=\"roeyaLink7\" href=\"${link}\"><button class=\"roeyaBtn7\" type=\"button\">\u0639\u0631\u0636 \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644<\/button><\/a>\r\n        <\/div>\r\n      <\/article>\r\n    `;\r\n  };\r\n\r\n  async function initArchive() {\r\n    const currentSlug = getCurrentSlug();\r\n    \r\n    try {\r\n      \/\/ 1. Try to fetch Category Info\r\n      const catRes = await fetch(`${BASE_API}\/course-category?slug=${currentSlug}`);\r\n      const catData = await catRes.json();\r\n\r\n      \/\/ Case A: No Category found (Maybe we are on the main archive page)\r\n      if (!catData || catData.length === 0) {\r\n        heroTitle.innerText = \"\u0627\u0644\u062f\u0648\u0631\u0627\u062a \u0627\u0644\u062a\u062f\u0631\u064a\u0628\u064a\u0629\";\r\n        breadcrumbName.innerText = \"\u0643\u0644 \u0627\u0644\u062f\u0648\u0631\u0627\u062a\";\r\n        loadCourses(null, \"\");\r\n        return;\r\n      }\r\n\r\n      \/\/ Case B: Category found\r\n      const category = catData[0];\r\n      const cleanName = clean(category.name);\r\n\r\n      heroTitle.innerText = cleanName;\r\n      breadcrumbName.innerText = cleanName; \/\/ Removed toUpperCase() as it doesn't apply to Arabic\r\n      \r\n      if(category.description) {\r\n        heroDesc.innerText = clean(category.description);\r\n      } else {\r\n        heroDesc.innerText = \"\u062a\u0635\u0641\u062d \u0645\u062c\u0645\u0648\u0639\u062a\u0646\u0627 \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629 \u0645\u0646 \u0627\u0644\u062f\u0648\u0631\u0627\u062a \u0627\u0644\u062a\u062f\u0631\u064a\u0628\u064a\u0629 \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0642\u0633\u0645.\";\r\n      }\r\n      \r\n      loadCourses(category.id, cleanName);\r\n\r\n    } catch (e) {\r\n      console.error(e);\r\n      heroTitle.innerText = \"\u0627\u0644\u062f\u0648\u0631\u0627\u062a\";\r\n      loadCourses(null, \"\");\r\n    }\r\n  }\r\n\r\n  async function loadCourses(catId, catName) {\r\n    let url = `${BASE_API}\/our-courses?per_page=12&_embed=1`;\r\n    if (catId) url += `&course-category=${catId}`;\r\n\r\n    try {\r\n      const res = await fetch(url);\r\n      const courses = await res.json();\r\n\r\n      if (!Array.isArray(courses) || courses.length === 0) {\r\n        grid.innerHTML = `<div class=\"archive-loader\">\u0644\u0627 \u062a\u0648\u062c\u062f \u062f\u0648\u0631\u0627\u062a \u0645\u062a\u0627\u062d\u0629 \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0642\u0633\u0645 \u062d\u0627\u0644\u064a\u0627\u064b.<\/div>`;\r\n        return;\r\n      }\r\n\r\n      grid.innerHTML = courses.map(c => courseCardHTML(c, catName)).join(\"\");\r\n\r\n    } catch (e) {\r\n      grid.innerHTML = `<div class=\"archive-loader\">\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u062f\u0648\u0631\u0627\u062a.<\/div>`;\r\n    }\r\n  }\r\n\r\n  initArchive();\r\n\r\n});\r\n<\/script>\r\n\r\n<!-- BACK TO TOP -->\r\n<style>\r\n  .back-to-top {\r\n    position: fixed; bottom: 30px; right: 30px; left: auto; width: 40px; height: 40px; border: 2px solid #c8ac82;\r\n    border-radius: 50%; display: flex; justify-content: center; align-items: center; text-decoration: none;\r\n    z-index: 999; background: transparent; opacity: 0; visibility: hidden; transform: translateY(20px);\r\n    transition: all 0.6s ease; pointer-events: none;\r\n  }\r\n  .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }\r\n  .back-to-top svg {\r\n    width: 20px; height: 20px; stroke: #c8ac82; stroke-width: 2.5; fill: none; stroke-linecap: round;\r\n    stroke-linejoin: round; transition: stroke 0.6s ease;\r\n  }\r\n  .back-to-top:hover { background-color: #c8ac82; }\r\n  .back-to-top:hover svg { stroke: #ffffff; }\r\n<\/style>\r\n\r\n<a href=\"#\" class=\"back-to-top\" aria-label=\"\u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0623\u0639\u0644\u0649\">\r\n  <svg viewBox=\"0 0 24 24\">\r\n    <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"5\"><\/line>\r\n    <polyline points=\"5 12 12 5 19 12\"><\/polyline>\r\n  <\/svg>\r\n<\/a>\r\n\r\n<script>\r\n  const backToTopButton = document.querySelector('.back-to-top');\r\n  window.addEventListener('scroll', () => {\r\n    const scrollTop = window.scrollY;\r\n    const docHeight = document.documentElement.scrollHeight;\r\n    const winHeight = window.innerHeight;\r\n    const scrollPercent = (scrollTop \/ (docHeight - winHeight)) * 100;\r\n    if (scrollPercent >= 50) { \r\n        backToTopButton.classList.add('show'); \r\n    } else { \r\n        backToTopButton.classList.remove('show'); \r\n    }\r\n  });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<\/body>\r\n<\/html>\r\n\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>\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u062a \u062c\u0627\u0631\u064a \u0627\u0644\u062a\u062d\u0645\u064a\u0644&#8230;<\/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":{"_jet_sm_ready_style":"","_jet_sm_style":"","_jet_sm_controls_values":"","_jet_sm_fonts_collection":"","_jet_sm_fonts_links":"","footnotes":""},"class_list":["post-1062","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/pages\/1062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/comments?post=1062"}],"version-history":[{"count":542,"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/pages\/1062\/revisions"}],"predecessor-version":[{"id":3294,"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/pages\/1062\/revisions\/3294"}],"wp:attachment":[{"href":"https:\/\/roeyaacademy.com\/ar\/wp-json\/wp\/v2\/media?parent=1062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}