{"id":10,"date":"2026-10-06T03:08:57","date_gmt":"2026-10-06T03:08:57","guid":{"rendered":"https:\/\/alawiin.com\/?page_id=10"},"modified":"2026-10-06T04:03:28","modified_gmt":"2026-10-06T04:03:28","slug":"%d9%85%d8%ac%d8%aa%d9%85%d8%b9-%c2%b7-%d8%ab%d9%82%d8%a7%d9%81%d8%a9-%c2%b7-%d8%aa%d8%a7%d8%b1%d9%8a%d8%ae","status":"publish","type":"page","link":"https:\/\/alawiin.com\/","title":{"rendered":"\u0645\u062c\u062a\u0645\u0639 \u00b7 \u062b\u0642\u0627\u0641\u0629 \u00b7 \u062a\u0627\u0631\u064a\u062e"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10\" class=\"elementor elementor-10\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb08b6b e-con e-atomic-element e-flexbox-base e-default-div e-a7cfb04 \" data-id=\"cb08b6b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cb08b6b\">\n    \t\t<div class=\"elementor-element elementor-element-b320531 elementor-widget elementor-widget-html\" data-id=\"b320531\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ==========================================\r\n     \u0645\u0648\u0642\u0639 \u0627\u0644\u0639\u0644\u0648\u064a\u0648\u0646 - \u0627\u0644\u0633\u0644\u0627\u064a\u062f\u0631 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\r\n     AL-ALAWIYOUN HERO SLIDER\r\n     Astra Full Width \/ Mobile Optimized\r\n========================================== -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n\r\n<style>\r\n\r\n\/* =====================================================\r\n   AL-A\u200b\u200bLAWIYOUN HERO\r\n   RESET ISOLATED\r\n===================================================== *\/\r\n\r\n.alawiyoun-hero,\r\n.alawiyoun-hero * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MAIN HERO\r\n===================================================== *\/\r\n\r\n.alawiyoun-hero {\r\n\r\n    --alawiyoun-navy: #071522;\r\n    --alawiyoun-navy-dark: #040d16;\r\n    --alawiyoun-orange: #f47b20;\r\n    --alawiyoun-orange-light: #ff963f;\r\n    --alawiyoun-white: #ffffff;\r\n\r\n    position: relative;\r\n\r\n    width: 100%;\r\n    max-width: 100%;\r\n\r\n    height: clamp(540px, 78svh, 720px);\r\n\r\n    min-height: 540px;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    overflow: hidden;\r\n\r\n    background: var(--alawiyoun-navy);\r\n\r\n    direction: rtl;\r\n\r\n    font-family:\r\n        \"Tajawal\",\r\n        Arial,\r\n        sans-serif;\r\n\r\n    isolation: isolate;\r\n\r\n    -webkit-tap-highlight-color: transparent;\r\n\r\n    touch-action: pan-y;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TRACK\r\n===================================================== *\/\r\n\r\n.alawiyoun-hero-track {\r\n\r\n    position: relative;\r\n\r\n    display: flex;\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    direction: ltr;\r\n\r\n    transition:\r\n        transform .85s\r\n        cubic-bezier(.77,0,.175,1);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   SLIDE\r\n===================================================== *\/\r\n\r\n.alawiyoun-hero-slide {\r\n\r\n    position: relative;\r\n\r\n    flex: 0 0 100%;\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    overflow: hidden;\r\n\r\n    direction: rtl;\r\n\r\n    background:\r\n        var(--alawiyoun-navy);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BACKGROUND IMAGE\r\n===================================================== *\/\r\n\r\n.alawiyoun-hero-slide-bg {\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    z-index: 0;\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    pointer-events: none;\r\n\r\n    user-select: none;\r\n\r\n    background-size: cover;\r\n\r\n    background-position: center;\r\n\r\n    transform: scale(1.04);\r\n\r\n    transition:\r\n        transform 7s\r\n        cubic-bezier(.2,.7,.2,1);\r\n}\r\n\r\n\r\n.alawiyoun-hero-slide.is-active\r\n.alawiyoun-hero-slide-bg {\r\n\r\n    transform: scale(1.10);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BACKGROUND 1\r\n===================================================== *\/\r\n\r\n.alawiyoun-bg-1 {\r\n\r\n    background-image:\r\n\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(4,13,22,.05) 0%,\r\n            rgba(4,13,22,.20) 25%,\r\n            rgba(4,13,22,.68) 65%,\r\n            rgba(4,13,22,.98) 100%\r\n        ),\r\n\r\n        url(\r\n            \"https:\/\/images.unsplash.com\/photo-1539650116574-75c0c6d73f6e?auto=format&fit=crop&w=2200&q=90\"\r\n        );\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BACKGROUND 2\r\n===================================================== *\/\r\n\r\n.alawiyoun-bg-2 {\r\n\r\n    background-image:\r\n\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(4,13,22,.04) 0%,\r\n            rgba(4,13,22,.18) 25%,\r\n            rgba(4,13,22,.68) 65%,\r\n            rgba(4,13,22,.98) 100%\r\n        ),\r\n\r\n        url(\r\n            \"https:\/\/images.unsplash.com\/photo-1548013146-72479768bada?auto=format&fit=crop&w=2200&q=90\"\r\n        );\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BACKGROUND 3\r\n===================================================== *\/\r\n\r\n.alawiyoun-bg-3 {\r\n\r\n    background-image:\r\n\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(4,13,22,.04) 0%,\r\n            rgba(4,13,22,.20) 25%,\r\n            rgba(4,13,22,.70) 65%,\r\n            rgba(4,13,22,.98) 100%\r\n        ),\r\n\r\n        url(\r\n            \"https:\/\/images.unsplash.com\/photo-1524492412937-b28074a5d7da?auto=format&fit=crop&w=2200&q=90\"\r\n        );\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CINEMATIC OVERLAY\r\n===================================================== *\/\r\n\r\n.alawiyoun-hero-slide::after {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    z-index: 1;\r\n\r\n    pointer-events: none;\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n            180deg,\r\n            rgba(4,13,22,.12) 0%,\r\n            rgba(4,13,22,0) 40%,\r\n            rgba(4,13,22,.42) 100%\r\n        );\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CONTENT CONTAINER\r\n===================================================== *\/\r\n\r\n.alawiyoun-hero-content {\r\n\r\n    position: relative;\r\n\r\n    z-index: 5;\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    max-width: 1380px;\r\n\r\n    min-height: 0;\r\n\r\n    margin: 0 auto;\r\n\r\n    padding:\r\n        0\r\n        clamp(20px,5vw,90px);\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: flex-start;\r\n\r\n    direction: rtl;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TEXT BOX\r\n===================================================== *\/\r\n\r\n.alawiyoun-hero-text {\r\n\r\n    width: min(650px,100%);\r\n\r\n    max-width: 100%;\r\n\r\n    min-width: 0;\r\n\r\n    margin: 0;\r\n\r\n    padding: 0;\r\n\r\n    text-align: right;\r\n\r\n    direction: rtl;\r\n\r\n    opacity: 0;\r\n\r\n    transform:\r\n        translateY(35px);\r\n\r\n    transition:\r\n\r\n        opacity .75s ease .15s,\r\n\r\n        transform .85s\r\n        cubic-bezier(.2,.7,.2,1);\r\n}\r\n\r\n\r\n.alawiyoun-hero-slide.is-active\r\n.alawiyoun-hero-text {\r\n\r\n    opacity: 1;\r\n\r\n    transform:\r\n        translateY(0);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CATEGORY\r\n===================================================== *\/\r\n\r\n.alawiyoun-hero-category {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: flex-start;\r\n\r\n    gap: 12px;\r\n\r\n    margin:\r\n        0 0 20px;\r\n\r\n    padding: 0;\r\n\r\n    color:\r\n        var(--alawiyoun-orange);\r\n\r\n    font-size: 15px;\r\n\r\n    font-weight: 700;\r\n\r\n    line-height: 1.5;\r\n}\r\n\r\n\r\n.alawiyoun-hero-category-line {\r\n\r\n    display: block;\r\n\r\n    width: 38px;\r\n\r\n    height: 2px;\r\n\r\n    flex-shrink: 0;\r\n\r\n    background:\r\n        var(--alawiyoun-orange);\r\n\r\n    border-radius: 20px;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TITLE\r\n===================================================== *\/\r\n\r\n.alawiyoun-hero-title {\r\n\r\n    max-width: 100%;\r\n\r\n    margin:\r\n        0 0 22px;\r\n\r\n    padding: 0;\r\n\r\n    color:\r\n        var(--alawiyoun-white);\r\n\r\n    font-family:\r\n        \"Tajawal\",\r\n        Arial,\r\n        sans-serif;\r\n\r\n    font-size:\r\n        clamp(36px,5vw,68px);\r\n\r\n    font-weight: 900;\r\n\r\n    line-height: 1.18;\r\n\r\n    letter-spacing: -1.5px;\r\n\r\n    text-align: right;\r\n\r\n    overflow-wrap: break-word;\r\n\r\n    word-break: normal;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   DESCRIPTION\r\n===================================================== *\/\r\n\r\n.alawiyoun-hero-description {\r\n\r\n    max-width: 590px;\r\n\r\n    margin:\r\n        0 0 32px;\r\n\r\n    padding: 0;\r\n\r\n    color:\r\n        rgba(255,255,255,.84);\r\n\r\n    font-family:\r\n        \"Tajawal\",\r\n        Arial,\r\n        sans-serif;\r\n\r\n    font-size:\r\n        clamp(15px,1.5vw,18px);\r\n\r\n    font-weight: 400;\r\n\r\n    line-height: 2;\r\n\r\n    text-align: right;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BUTTON\r\n===================================================== *\/\r\n\r\n.alawiyoun-hero-button {\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    min-width: 160px;\r\n\r\n    min-height: 53px;\r\n\r\n    margin: 0;\r\n\r\n    padding:\r\n        0 27px;\r\n\r\n    border: 0;\r\n\r\n    border-radius: 8px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #f47b20,\r\n            #ff9138\r\n        );\r\n\r\n    color: #ffffff !important;\r\n\r\n    font-family:\r\n        \"Tajawal\",\r\n        Arial,\r\n        sans-serif;\r\n\r\n    font-size: 15px;\r\n\r\n    font-weight: 700;\r\n\r\n    line-height: 1;\r\n\r\n    text-decoration: none !important;\r\n\r\n    box-shadow:\r\n        0 12px 28px\r\n        rgba(244,123,32,.24);\r\n\r\n    transition:\r\n        transform .25s ease,\r\n        box-shadow .25s ease,\r\n        filter .25s ease;\r\n}\r\n\r\n\r\n.alawiyoun-hero-button:hover {\r\n\r\n    transform:\r\n        translateY(-3px);\r\n\r\n    filter:\r\n        brightness(1.08);\r\n\r\n    box-shadow:\r\n        0 16px 35px\r\n        rgba(244,123,32,.34);\r\n\r\n    color: #ffffff !important;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BRAND\r\n===================================================== *\/\r\n\r\n.alawiyoun-hero-brand {\r\n\r\n    position: absolute;\r\n\r\n    z-index: 20;\r\n\r\n    top: 30px;\r\n\r\n    right:\r\n        clamp(25px,6vw,90px);\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 11px;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    color:\r\n        rgba(255,255,255,.95);\r\n\r\n    font-family:\r\n        \"Tajawal\",\r\n        Arial,\r\n        sans-serif;\r\n\r\n    font-size: 17px;\r\n\r\n    font-weight: 800;\r\n\r\n    direction: rtl;\r\n}\r\n\r\n\r\n.alawiyoun-hero-brand-dot {\r\n\r\n    width: 9px;\r\n\r\n    height: 9px;\r\n\r\n    flex-shrink: 0;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        var(--alawiyoun-orange);\r\n\r\n    box-shadow:\r\n        0 0 0 6px\r\n        rgba(244,123,32,.13);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   DOTS\r\n===================================================== *\/\r\n\r\n.alawiyoun-hero-dots {\r\n\r\n    position: absolute;\r\n\r\n    z-index: 30;\r\n\r\n    right:\r\n        clamp(25px,6vw,90px);\r\n\r\n    bottom: 38px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 8px;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    direction: ltr;\r\n}\r\n\r\n\r\n.alawiyoun-hero-dot {\r\n\r\n    width: 8px;\r\n\r\n    height: 8px;\r\n\r\n    margin: 0;\r\n\r\n    padding: 0;\r\n\r\n    border: 0;\r\n\r\n    outline: none;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        rgba(255,255,255,.38);\r\n\r\n    cursor: pointer;\r\n\r\n    transition:\r\n        width .35s ease,\r\n        background .35s ease,\r\n        transform .35s ease;\r\n}\r\n\r\n\r\n.alawiyoun-hero-dot:hover {\r\n\r\n    background:\r\n        rgba(255,255,255,.75);\r\n}\r\n\r\n\r\n.alawiyoun-hero-dot.is-active {\r\n\r\n    width: 30px;\r\n\r\n    border-radius: 10px;\r\n\r\n    background:\r\n        var(--alawiyoun-orange);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BOTTOM LINE\r\n===================================================== *\/\r\n\r\n.alawiyoun-hero-bottom-line {\r\n\r\n    position: absolute;\r\n\r\n    z-index: 40;\r\n\r\n    right: 0;\r\n\r\n    bottom: 0;\r\n\r\n    width: 100%;\r\n\r\n    height: 3px;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n            90deg,\r\n            transparent 0%,\r\n            rgba(244,123,32,.25) 20%,\r\n            var(--alawiyoun-orange) 50%,\r\n            rgba(244,123,32,.25) 80%,\r\n            transparent 100%\r\n        );\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TABLET\r\n===================================================== *\/\r\n\r\n@media (max-width:1024px) {\r\n\r\n    .alawiyoun-hero {\r\n\r\n        height:\r\n            clamp(540px,72svh,650px);\r\n\r\n        min-height: 540px;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-content {\r\n\r\n        padding-right:\r\n            clamp(28px,5vw,55px);\r\n\r\n        padding-left:\r\n            clamp(28px,5vw,55px);\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-text {\r\n\r\n        width:\r\n            min(600px,100%);\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-title {\r\n\r\n        font-size:\r\n            clamp(38px,5.2vw,58px);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MOBILE\r\n   ASTRA FULL WIDTH\r\n===================================================== *\/\r\n\r\n@media (max-width:767px) {\r\n\r\n\r\n    \/* -----------------------------------------------\r\n       \u0625\u0632\u0627\u0644\u0629 \u062a\u0623\u062b\u064a\u0631 \u062d\u0627\u0648\u064a\u0627\u062a Astra\r\n    ------------------------------------------------ *\/\r\n\r\n    .alawiyoun-hero {\r\n\r\n        width: 100vw !important;\r\n\r\n        max-width: 100vw !important;\r\n\r\n        min-width: 100vw !important;\r\n\r\n        \/*\r\n         * \u0647\u0630\u0647 \u0623\u0647\u0645 \u0642\u0627\u0639\u062f\u0629 \u0645\u0639 Astra.\r\n         *\r\n         * \u062a\u062c\u0639\u0644 \u0627\u0644\u0633\u0644\u0627\u064a\u062f\u0631 \u064a\u0628\u062f\u0623 \u0645\u0646 \u0627\u0644\u062d\u0627\u0641\u0629\r\n         * \u0627\u0644\u064a\u0633\u0631\u0649 \u0644\u0644\u0634\u0627\u0634\u0629 \u062d\u062a\u0649 \u0644\u0648 \u0643\u0627\u0646 \u062f\u0627\u062e\u0644\r\n         * .ast-container\r\n         *\/\r\n        margin-left:\r\n            calc(50% - 50vw) !important;\r\n\r\n        margin-right: 0 !important;\r\n\r\n        margin-top: 0 !important;\r\n\r\n        margin-bottom: 0 !important;\r\n\r\n        padding: 0 !important;\r\n\r\n        border: 0 !important;\r\n\r\n        border-radius: 0 !important;\r\n\r\n        position: relative !important;\r\n\r\n        left: auto !important;\r\n\r\n        right: auto !important;\r\n\r\n        overflow: hidden !important;\r\n\r\n        height:\r\n            min(720px,88svh);\r\n\r\n        min-height: 560px;\r\n    }\r\n\r\n\r\n    \/*\r\n     * \u0645\u0646\u0639 \u0638\u0647\u0648\u0631 \u0634\u0631\u064a\u0637 \u0623\u0641\u0642\u064a \u0628\u0633\u0628\u0628 100vw\r\n     *\/\r\n\r\n    html,\r\n    body {\r\n\r\n        max-width: 100% !important;\r\n\r\n        overflow-x: hidden !important;\r\n    }\r\n\r\n\r\n    \/*\r\n     * \u0628\u0639\u0636 \u0646\u0633\u062e Astra \u062a\u0636\u0639 padding\r\n     * \u0639\u0644\u0649 \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649\r\n     *\/\r\n\r\n    .alawiyoun-hero-track {\r\n\r\n        width: 100% !important;\r\n\r\n        max-width: 100% !important;\r\n\r\n        min-width: 100% !important;\r\n\r\n        margin: 0 !important;\r\n\r\n        padding: 0 !important;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-slide {\r\n\r\n        width: 100% !important;\r\n\r\n        max-width: 100% !important;\r\n\r\n        min-width: 100% !important;\r\n\r\n        margin: 0 !important;\r\n\r\n        padding: 0 !important;\r\n\r\n        border-radius: 0 !important;\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       MOBILE BACKGROUND\r\n    ================================================= *\/\r\n\r\n    .alawiyoun-bg-1,\r\n    .alawiyoun-bg-2,\r\n    .alawiyoun-bg-3 {\r\n\r\n        background-position:\r\n            58% center;\r\n\r\n        background-size:\r\n            cover;\r\n    }\r\n\r\n\r\n    .alawiyoun-bg-1 {\r\n\r\n        background-image:\r\n\r\n            linear-gradient(\r\n                180deg,\r\n                rgba(4,13,22,.18) 0%,\r\n                rgba(4,13,22,.38) 34%,\r\n                rgba(4,13,22,.92) 72%,\r\n                rgba(4,13,22,.99) 100%\r\n            ),\r\n\r\n            url(\r\n                \"https:\/\/images.unsplash.com\/photo-1539650116574-75c0c6d73f6e?auto=format&fit=crop&w=1200&q=85\"\r\n            );\r\n    }\r\n\r\n\r\n    .alawiyoun-bg-2 {\r\n\r\n        background-image:\r\n\r\n            linear-gradient(\r\n                180deg,\r\n                rgba(4,13,22,.18) 0%,\r\n                rgba(4,13,22,.38) 34%,\r\n                rgba(4,13,22,.92) 72%,\r\n                rgba(4,13,22,.99) 100%\r\n            ),\r\n\r\n            url(\r\n                \"https:\/\/images.unsplash.com\/photo-1548013146-72479768bada?auto=format&fit=crop&w=1200&q=85\"\r\n            );\r\n    }\r\n\r\n\r\n    .alawiyoun-bg-3 {\r\n\r\n        background-image:\r\n\r\n            linear-gradient(\r\n                180deg,\r\n                rgba(4,13,22,.18) 0%,\r\n                rgba(4,13,22,.38) 34%,\r\n                rgba(4,13,22,.92) 72%,\r\n                rgba(4,13,22,.99) 100%\r\n            ),\r\n\r\n            url(\r\n                \"https:\/\/images.unsplash.com\/photo-1524492412937-b28074a5d7da?auto=format&fit=crop&w=1200&q=85\"\r\n            );\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-slide-bg {\r\n\r\n        transform:\r\n            scale(1.01);\r\n\r\n        transition:\r\n            transform 7s\r\n            cubic-bezier(.2,.7,.2,1);\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-slide.is-active\r\n    .alawiyoun-hero-slide-bg {\r\n\r\n        transform:\r\n            scale(1.05);\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       MOBILE CONTENT\r\n       CENTER\r\n    ================================================= *\/\r\n\r\n    .alawiyoun-hero-content {\r\n\r\n        width: 100% !important;\r\n\r\n        height: 100% !important;\r\n\r\n        max-width: none !important;\r\n\r\n        margin: 0 !important;\r\n\r\n        \/*\r\n         * \u062a\u0648\u0633\u064a\u0637 \u0639\u0645\u0648\u062f\u064a\r\n         *\/\r\n        align-items: center;\r\n\r\n        \/*\r\n         * \u062a\u0648\u0633\u064a\u0637 \u0623\u0641\u0642\u064a\r\n         *\/\r\n        justify-content: center;\r\n\r\n        padding:\r\n\r\n            max(\r\n                70px,\r\n                env(safe-area-inset-top)\r\n            )\r\n\r\n            18px\r\n\r\n            max(\r\n                70px,\r\n                env(safe-area-inset-bottom)\r\n            )\r\n\r\n            18px;\r\n\r\n        text-align: center;\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       MOBILE TEXT\r\n    ================================================= *\/\r\n\r\n    .alawiyoun-hero-text {\r\n\r\n        width: 100%;\r\n\r\n        max-width: 680px;\r\n\r\n        margin: 0 auto;\r\n\r\n        padding: 0;\r\n\r\n        text-align: center;\r\n\r\n        display: flex;\r\n\r\n        flex-direction: column;\r\n\r\n        align-items: center;\r\n\r\n        justify-content: center;\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       CATEGORY\r\n    ================================================= *\/\r\n\r\n    .alawiyoun-hero-category {\r\n\r\n        width: 100%;\r\n\r\n        margin:\r\n            0 0 13px;\r\n\r\n        gap: 9px;\r\n\r\n        justify-content: center;\r\n\r\n        text-align: center;\r\n\r\n        font-size: 13px;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-category-line {\r\n\r\n        width: 28px;\r\n\r\n        height: 2px;\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       TITLE\r\n    ================================================= *\/\r\n\r\n    .alawiyoun-hero-title {\r\n\r\n        width: 100%;\r\n\r\n        max-width: 620px;\r\n\r\n        margin:\r\n            0 auto 14px;\r\n\r\n        padding: 0;\r\n\r\n        font-size:\r\n            clamp(30px,8.8vw,43px);\r\n\r\n        line-height: 1.25;\r\n\r\n        letter-spacing: -.4px;\r\n\r\n        text-align: center;\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       DESCRIPTION\r\n    ================================================= *\/\r\n\r\n    .alawiyoun-hero-description {\r\n\r\n        width: 100%;\r\n\r\n        max-width: 600px;\r\n\r\n        margin:\r\n            0 auto 22px;\r\n\r\n        padding: 0;\r\n\r\n        font-size:\r\n            clamp(13.5px,3.7vw,16px);\r\n\r\n        line-height: 1.85;\r\n\r\n        text-align: center;\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       BUTTON\r\n    ================================================= *\/\r\n\r\n    .alawiyoun-hero-button {\r\n\r\n        min-height: 47px;\r\n\r\n        min-width: 138px;\r\n\r\n        margin:\r\n            0 auto;\r\n\r\n        padding:\r\n            0 21px;\r\n\r\n        border-radius: 7px;\r\n\r\n        font-size: 14px;\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       BRAND\r\n    ================================================= *\/\r\n\r\n    .alawiyoun-hero-brand {\r\n\r\n        top:\r\n            max(\r\n                16px,\r\n                env(safe-area-inset-top)\r\n            );\r\n\r\n        right:\r\n            max(\r\n                18px,\r\n                env(safe-area-inset-right)\r\n            );\r\n\r\n        gap: 9px;\r\n\r\n        font-size: 14px;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-brand-dot {\r\n\r\n        width: 8px;\r\n\r\n        height: 8px;\r\n\r\n        box-shadow:\r\n            0 0 0 5px\r\n            rgba(244,123,32,.13);\r\n    }\r\n\r\n\r\n    \/* =================================================\r\n       DOTS\r\n    ================================================= *\/\r\n\r\n    .alawiyoun-hero-dots {\r\n\r\n        right: 50%;\r\n\r\n        bottom:\r\n            max(\r\n                20px,\r\n                calc(\r\n                    15px +\r\n                    env(safe-area-inset-bottom)\r\n                )\r\n            );\r\n\r\n        transform:\r\n            translateX(50%);\r\n\r\n        gap: 7px;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-dot {\r\n\r\n        width: 7px;\r\n\r\n        height: 7px;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-dot.is-active {\r\n\r\n        width: 25px;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-bottom-line {\r\n\r\n        height: 2px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   SMALL MOBILE\r\n===================================================== *\/\r\n\r\n@media (max-width:390px) {\r\n\r\n    .alawiyoun-hero {\r\n\r\n        height:\r\n            min(650px,90svh);\r\n\r\n        min-height: 520px;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-content {\r\n\r\n        padding:\r\n\r\n            65px\r\n\r\n            16px\r\n\r\n            65px\r\n\r\n            16px;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-title {\r\n\r\n        font-size:\r\n            clamp(27px,8.5vw,34px);\r\n\r\n        line-height: 1.28;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-description {\r\n\r\n        font-size: 13px;\r\n\r\n        line-height: 1.8;\r\n\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-button {\r\n\r\n        min-height: 45px;\r\n\r\n        min-width: 132px;\r\n\r\n        padding:\r\n            0 18px;\r\n\r\n        font-size: 13.5px;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-brand {\r\n\r\n        right: 16px;\r\n\r\n        font-size: 13px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MOBILE LANDSCAPE\r\n===================================================== *\/\r\n\r\n@media (max-width:900px) and (orientation:landscape) {\r\n\r\n    .alawiyoun-hero {\r\n\r\n        height:\r\n            clamp(430px,100svh,560px);\r\n\r\n        min-height: 430px;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-content {\r\n\r\n        align-items: center;\r\n\r\n        justify-content: center;\r\n\r\n        padding:\r\n            70px\r\n            40px\r\n            68px;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-text {\r\n\r\n        max-width: 720px;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-title {\r\n\r\n        font-size:\r\n            clamp(28px,5vw,40px);\r\n\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-description {\r\n\r\n        max-width: 650px;\r\n\r\n        margin-bottom: 14px;\r\n\r\n        font-size: 13px;\r\n\r\n        line-height: 1.65;\r\n    }\r\n\r\n\r\n    .alawiyoun-hero-button {\r\n\r\n        min-height: 43px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LARGE SCREENS\r\n===================================================== *\/\r\n\r\n@media (min-width:1600px) {\r\n\r\n    .alawiyoun-hero {\r\n\r\n        height:\r\n            min(760px,78svh);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   USER SELECT\r\n===================================================== *\/\r\n\r\n.alawiyoun-hero,\r\n.alawiyoun-hero * {\r\n\r\n    -webkit-user-select: none;\r\n\r\n    user-select: none;\r\n}\r\n\r\n\r\n.alawiyoun-hero a,\r\n.alawiyoun-hero button {\r\n\r\n    -webkit-user-select: none;\r\n\r\n    user-select: none;\r\n\r\n    touch-action: manipulation;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   REDUCED MOTION\r\n===================================================== *\/\r\n\r\n@media (prefers-reduced-motion:reduce) {\r\n\r\n    .alawiyoun-hero-track,\r\n    .alawiyoun-hero-slide-bg,\r\n    .alawiyoun-hero-text,\r\n    .alawiyoun-hero-button {\r\n\r\n        transition: none !important;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =====================================================\r\n     HERO HTML\r\n===================================================== -->\r\n\r\n<section\r\n    class=\"alawiyoun-hero\"\r\n    id=\"alawiyounHero\"\r\n    aria-label=\"\u0623\u0628\u0631\u0632 \u0645\u062d\u062a\u0648\u0649 \u0645\u0648\u0642\u0639 \u0627\u0644\u0639\u0644\u0648\u064a\u0648\u0646\"\r\n>\r\n\r\n\r\n    <!-- ==========================================\r\n         \u0627\u0633\u0645 \u0627\u0644\u0645\u0648\u0642\u0639\r\n    =========================================== -->\r\n\r\n    <div class=\"alawiyoun-hero-brand\">\r\n\r\n        <span\r\n            class=\"alawiyoun-hero-brand-dot\"\r\n        ><\/span>\r\n\r\n        <span>\u0627\u0644\u0639\u0644\u0648\u064a\u0648\u0646<\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- ==========================================\r\n         TRACK\r\n    =========================================== -->\r\n\r\n    <div\r\n        class=\"alawiyoun-hero-track\"\r\n        id=\"alawiyounHeroTrack\"\r\n    >\r\n\r\n\r\n        <!-- ======================================\r\n             SLIDE 1\r\n        ======================================= -->\r\n\r\n        <article\r\n            class=\"alawiyoun-hero-slide is-active\"\r\n        >\r\n\r\n            <div\r\n                class=\"alawiyoun-hero-slide-bg alawiyoun-bg-1\"\r\n            ><\/div>\r\n\r\n\r\n            <div\r\n                class=\"alawiyoun-hero-content\"\r\n            >\r\n\r\n                <div\r\n                    class=\"alawiyoun-hero-text\"\r\n                >\r\n\r\n\r\n                    <div\r\n                        class=\"alawiyoun-hero-category\"\r\n                    >\r\n\r\n                        <span\r\n                            class=\"alawiyoun-hero-category-line\"\r\n                        ><\/span>\r\n\r\n                        \u062a\u0627\u0631\u064a\u062e \u0648\u0647\u0648\u064a\u0629\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <h1\r\n                        class=\"alawiyoun-hero-title\"\r\n                    >\r\n\r\n                        \u062d\u0643\u0627\u064a\u0629 \u0634\u0639\u0628<br>\r\n\r\n                        \u0648\u062c\u0630\u0648\u0631 \u0644\u0627 \u062a\u064f\u0646\u0633\u0649\r\n\r\n                    <\/h1>\r\n\r\n\r\n                    <p\r\n                        class=\"alawiyoun-hero-description\"\r\n                    >\r\n\r\n                        \u0645\u0633\u0627\u062d\u0629 \u062a\u0647\u062a\u0645 \u0628\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0639\u0644\u0648\u064a\u064a\u0646 \u0648\u062a\u0631\u0627\u062b\u0647\u0645 \u0648\u062b\u0642\u0627\u0641\u062a\u0647\u0645\u060c\r\n                        \u0648\u062a\u0648\u062b\u0651\u0642 \u0627\u0644\u062d\u0643\u0627\u064a\u0627\u062a \u0627\u0644\u062a\u064a \u0635\u0646\u0639\u062a \u0627\u0644\u0630\u0627\u0643\u0631\u0629 \u0639\u0628\u0631 \u0627\u0644\u0623\u062c\u064a\u0627\u0644.\r\n\r\n                    <\/p>\r\n\r\n\r\n                    <a\r\n                        href=\"#\"\r\n                        class=\"alawiyoun-hero-button\"\r\n                    >\r\n\r\n                        \u0627\u0643\u062a\u0634\u0641 \u0627\u0644\u0645\u0632\u064a\u062f\r\n\r\n                    <\/a>\r\n\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/article>\r\n\r\n\r\n        <!-- ======================================\r\n             SLIDE 2\r\n        ======================================= -->\r\n\r\n        <article\r\n            class=\"alawiyoun-hero-slide\"\r\n        >\r\n\r\n            <div\r\n                class=\"alawiyoun-hero-slide-bg alawiyoun-bg-2\"\r\n            ><\/div>\r\n\r\n\r\n            <div\r\n                class=\"alawiyoun-hero-content\"\r\n            >\r\n\r\n                <div\r\n                    class=\"alawiyoun-hero-text\"\r\n                >\r\n\r\n\r\n                    <div\r\n                        class=\"alawiyoun-hero-category\"\r\n                    >\r\n\r\n                        <span\r\n                            class=\"alawiyoun-hero-category-line\"\r\n                        ><\/span>\r\n\r\n                        \u0627\u0644\u062b\u0642\u0627\u0641\u0629 \u0648\u0627\u0644\u062a\u0631\u0627\u062b\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <h2\r\n                        class=\"alawiyoun-hero-title\"\r\n                    >\r\n\r\n                        \u062a\u0631\u0627\u062b\u064c \u0646\u062d\u0641\u0638\u0647<br>\r\n\r\n                        \u0644\u0644\u0623\u062c\u064a\u0627\u0644 \u0627\u0644\u0642\u0627\u062f\u0645\u0629\r\n\r\n                    <\/h2>\r\n\r\n\r\n                    <p\r\n                        class=\"alawiyoun-hero-description\"\r\n                    >\r\n\r\n                        \u0645\u0646 \u0627\u0644\u0639\u0627\u062f\u0627\u062a \u0648\u0627\u0644\u062d\u0643\u0627\u064a\u0627\u062a \u0625\u0644\u0649 \u0627\u0644\u0641\u0646 \u0648\u0627\u0644\u0623\u062f\u0628\u060c\r\n                        \u0646\u0643\u062a\u0634\u0641 \u0645\u0639\u064b\u0627 \u062a\u0641\u0627\u0635\u064a\u0644 \u062b\u0642\u0627\u0641\u064a\u0629 \u062a\u0633\u062a\u062d\u0642 \u0623\u0646 \u062a\u0628\u0642\u0649 \u062d\u0627\u0636\u0631\u0629.\r\n\r\n                    <\/p>\r\n\r\n\r\n                    <a\r\n                        href=\"#\"\r\n                        class=\"alawiyoun-hero-button\"\r\n                    >\r\n\r\n                        \u0627\u0633\u062a\u0643\u0634\u0641 \u0627\u0644\u062a\u0631\u0627\u062b\r\n\r\n                    <\/a>\r\n\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/article>\r\n\r\n\r\n        <!-- ======================================\r\n             SLIDE 3\r\n        ======================================= -->\r\n\r\n        <article\r\n            class=\"alawiyoun-hero-slide\"\r\n        >\r\n\r\n            <div\r\n                class=\"alawiyoun-hero-slide-bg alawiyoun-bg-3\"\r\n            ><\/div>\r\n\r\n\r\n            <div\r\n                class=\"alawiyoun-hero-content\"\r\n            >\r\n\r\n                <div\r\n                    class=\"alawiyoun-hero-text\"\r\n                >\r\n\r\n\r\n                    <div\r\n                        class=\"alawiyoun-hero-category\"\r\n                    >\r\n\r\n                        <span\r\n                            class=\"alawiyoun-hero-category-line\"\r\n                        ><\/span>\r\n\r\n                        \u0623\u062e\u0628\u0627\u0631 \u0648\u0645\u0642\u0627\u0644\u0627\u062a\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <h2\r\n                        class=\"alawiyoun-hero-title\"\r\n                    >\r\n\r\n                        \u0646\u0642\u0631\u0623 \u0627\u0644\u0645\u0627\u0636\u064a<br>\r\n\r\n                        \u0648\u0646\u0641\u0647\u0645 \u0627\u0644\u062d\u0627\u0636\u0631\r\n\r\n                    <\/h2>\r\n\r\n\r\n                    <p\r\n                        class=\"alawiyoun-hero-description\"\r\n                    >\r\n\r\n                        \u0623\u062e\u0628\u0627\u0631 \u0648\u0645\u0642\u0627\u0644\u0627\u062a \u0648\u0645\u0648\u0627\u062f \u062a\u0627\u0631\u064a\u062e\u064a\u0629 \u0648\u062b\u0642\u0627\u0641\u064a\u0629\r\n                        \u062a\u0642\u062f\u0645 \u0631\u0624\u064a\u0629 \u0623\u0648\u0633\u0639 \u0644\u0644\u0645\u062c\u062a\u0645\u0639 \u0648\u0627\u0644\u0625\u0646\u0633\u0627\u0646 \u0648\u0627\u0644\u0630\u0627\u0643\u0631\u0629.\r\n\r\n                    <\/p>\r\n\r\n\r\n                    <a\r\n                        href=\"#\"\r\n                        class=\"alawiyoun-hero-button\"\r\n                    >\r\n\r\n                        \u0627\u0642\u0631\u0623 \u0627\u0644\u0645\u0642\u0627\u0644\u0627\u062a\r\n\r\n                    <\/a>\r\n\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/article>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- ==========================================\r\n         DOTS\r\n    =========================================== -->\r\n\r\n    <div\r\n        class=\"alawiyoun-hero-dots\"\r\n        role=\"tablist\"\r\n        aria-label=\"\u0627\u0644\u062a\u0646\u0642\u0644 \u0628\u064a\u0646 \u0627\u0644\u0634\u0631\u0627\u0626\u062d\"\r\n    >\r\n\r\n        <button\r\n            type=\"button\"\r\n            class=\"alawiyoun-hero-dot is-active\"\r\n            data-slide=\"0\"\r\n            aria-label=\"\u0627\u0644\u0634\u0631\u064a\u062d\u0629 \u0627\u0644\u0623\u0648\u0644\u0649\"\r\n        ><\/button>\r\n\r\n\r\n        <button\r\n            type=\"button\"\r\n            class=\"alawiyoun-hero-dot\"\r\n            data-slide=\"1\"\r\n            aria-label=\"\u0627\u0644\u0634\u0631\u064a\u062d\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629\"\r\n        ><\/button>\r\n\r\n\r\n        <button\r\n            type=\"button\"\r\n            class=\"alawiyoun-hero-dot\"\r\n            data-slide=\"2\"\r\n            aria-label=\"\u0627\u0644\u0634\u0631\u064a\u062d\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629\"\r\n        ><\/button>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- ==========================================\r\n         BOTTOM LINE\r\n    =========================================== -->\r\n\r\n    <div\r\n        class=\"alawiyoun-hero-bottom-line\"\r\n    ><\/div>\r\n\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =====================================================\r\n     JAVASCRIPT\r\n===================================================== -->\r\n\r\n<script>\r\n\r\n(function () {\r\n\r\n    \"use strict\";\r\n\r\n\r\n    \/* ==========================================\r\n       HERO\r\n    =========================================== *\/\r\n\r\n    const slider =\r\n        document.getElementById(\r\n            \"alawiyounHero\"\r\n        );\r\n\r\n\r\n    if (!slider) {\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    \/* ==========================================\r\n       TRACK\r\n    =========================================== *\/\r\n\r\n    const track =\r\n        document.getElementById(\r\n            \"alawiyounHeroTrack\"\r\n        );\r\n\r\n\r\n    \/* ==========================================\r\n       SLIDES\r\n    =========================================== *\/\r\n\r\n    const slides =\r\n        Array.from(\r\n            slider.querySelectorAll(\r\n                \".alawiyoun-hero-slide\"\r\n            )\r\n        );\r\n\r\n\r\n    \/* ==========================================\r\n       DOTS\r\n    =========================================== *\/\r\n\r\n    const dots =\r\n        Array.from(\r\n            slider.querySelectorAll(\r\n                \".alawiyoun-hero-dot\"\r\n            )\r\n        );\r\n\r\n\r\n    \/* ==========================================\r\n       VARIABLES\r\n    =========================================== *\/\r\n\r\n    let currentSlide = 0;\r\n\r\n    let autoplay = null;\r\n\r\n    let startX = 0;\r\n\r\n    let endX = 0;\r\n\r\n    let isDragging = false;\r\n\r\n\r\n    const AUTOPLAY_TIME = 6000;\r\n\r\n\r\n    \/* ==========================================\r\n       GO TO SLIDE\r\n    =========================================== *\/\r\n\r\n    function goToSlide(index) {\r\n\r\n        if (\r\n            index < 0 ||\r\n            index >= slides.length\r\n        ) {\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n        currentSlide = index;\r\n\r\n\r\n        track.style.transform =\r\n            \"translate3d(-\" +\r\n            (currentSlide * 100) +\r\n            \"%,0,0)\";\r\n\r\n\r\n        slides.forEach(\r\n            function (slide, i) {\r\n\r\n                slide.classList.toggle(\r\n                    \"is-active\",\r\n                    i === currentSlide\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n\r\n        dots.forEach(\r\n            function (dot, i) {\r\n\r\n                dot.classList.toggle(\r\n                    \"is-active\",\r\n                    i === currentSlide\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* ==========================================\r\n       NEXT\r\n    =========================================== *\/\r\n\r\n    function nextSlide() {\r\n\r\n        let next =\r\n            currentSlide + 1;\r\n\r\n\r\n        if (\r\n            next >= slides.length\r\n        ) {\r\n\r\n            next = 0;\r\n\r\n        }\r\n\r\n\r\n        goToSlide(next);\r\n\r\n    }\r\n\r\n\r\n    \/* ==========================================\r\n       AUTOPLAY\r\n    =========================================== *\/\r\n\r\n    function startAutoplay() {\r\n\r\n        stopAutoplay();\r\n\r\n\r\n        autoplay =\r\n            setInterval(\r\n                nextSlide,\r\n                AUTOPLAY_TIME\r\n            );\r\n\r\n    }\r\n\r\n\r\n    function stopAutoplay() {\r\n\r\n        if (\r\n            autoplay !== null\r\n        ) {\r\n\r\n            clearInterval(\r\n                autoplay\r\n            );\r\n\r\n            autoplay = null;\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n    \/* ==========================================\r\n       DOT CLICK\r\n    =========================================== *\/\r\n\r\n    dots.forEach(\r\n        function (dot) {\r\n\r\n            dot.addEventListener(\r\n                \"click\",\r\n                function () {\r\n\r\n                    const index =\r\n                        Number(\r\n                            dot.getAttribute(\r\n                                \"data-slide\"\r\n                            )\r\n                        );\r\n\r\n\r\n                    goToSlide(index);\r\n\r\n                    startAutoplay();\r\n\r\n                }\r\n            );\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* ==========================================\r\n       TOUCH START\r\n    =========================================== *\/\r\n\r\n    slider.addEventListener(\r\n        \"touchstart\",\r\n        function (event) {\r\n\r\n            if (\r\n                !event.touches ||\r\n                !event.touches.length\r\n            ) {\r\n\r\n                return;\r\n\r\n            }\r\n\r\n\r\n            startX =\r\n                event.touches[0].clientX;\r\n\r\n            isDragging = true;\r\n\r\n            stopAutoplay();\r\n\r\n        },\r\n        {\r\n            passive: true\r\n        }\r\n    );\r\n\r\n\r\n    \/* ==========================================\r\n       TOUCH END\r\n    =========================================== *\/\r\n\r\n    slider.addEventListener(\r\n        \"touchend\",\r\n        function (event) {\r\n\r\n            if (!isDragging) {\r\n\r\n                return;\r\n\r\n            }\r\n\r\n\r\n            if (\r\n                !event.changedTouches ||\r\n                !event.changedTouches.length\r\n            ) {\r\n\r\n                return;\r\n\r\n            }\r\n\r\n\r\n            endX =\r\n                event.changedTouches[0].clientX;\r\n\r\n\r\n            handleSwipe();\r\n\r\n\r\n            isDragging = false;\r\n\r\n            startAutoplay();\r\n\r\n        },\r\n        {\r\n            passive: true\r\n        }\r\n    );\r\n\r\n\r\n    \/* ==========================================\r\n       MOUSE DOWN\r\n    =========================================== *\/\r\n\r\n    slider.addEventListener(\r\n        \"mousedown\",\r\n        function (event) {\r\n\r\n            startX =\r\n                event.clientX;\r\n\r\n            isDragging = true;\r\n\r\n            stopAutoplay();\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* ==========================================\r\n       MOUSE UP\r\n    =========================================== *\/\r\n\r\n    slider.addEventListener(\r\n        \"mouseup\",\r\n        function (event) {\r\n\r\n            if (!isDragging) {\r\n\r\n                return;\r\n\r\n            }\r\n\r\n\r\n            endX =\r\n                event.clientX;\r\n\r\n\r\n            handleSwipe();\r\n\r\n\r\n            isDragging = false;\r\n\r\n            startAutoplay();\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* ==========================================\r\n       MOUSE LEAVE\r\n    =========================================== *\/\r\n\r\n    slider.addEventListener(\r\n        \"mouseleave\",\r\n        function () {\r\n\r\n            if (isDragging) {\r\n\r\n                isDragging = false;\r\n\r\n                startAutoplay();\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* ==========================================\r\n       SWIPE\r\n    =========================================== *\/\r\n\r\n    function handleSwipe() {\r\n\r\n        const distance =\r\n            startX - endX;\r\n\r\n\r\n        if (\r\n            Math.abs(distance) < 50\r\n        ) {\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n        \/* \u0627\u0644\u0633\u062d\u0628 \u0644\u0644\u064a\u0633\u0627\u0631 *\/\r\n\r\n        if (\r\n            distance > 0\r\n        ) {\r\n\r\n            nextSlide();\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n        \/* \u0627\u0644\u0633\u062d\u0628 \u0644\u0644\u064a\u0645\u064a\u0646 *\/\r\n\r\n        let previous =\r\n            currentSlide - 1;\r\n\r\n\r\n        if (\r\n            previous < 0\r\n        ) {\r\n\r\n            previous =\r\n                slides.length - 1;\r\n\r\n        }\r\n\r\n\r\n        goToSlide(previous);\r\n\r\n    }\r\n\r\n\r\n    \/* ==========================================\r\n       MOUSE ENTER\r\n    =========================================== *\/\r\n\r\n    slider.addEventListener(\r\n        \"mouseenter\",\r\n        function () {\r\n\r\n            stopAutoplay();\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* ==========================================\r\n       MOUSE LEAVE\r\n    =========================================== *\/\r\n\r\n    slider.addEventListener(\r\n        \"mouseleave\",\r\n        function () {\r\n\r\n            startAutoplay();\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* ==========================================\r\n       PREVENT IMAGE DRAG\r\n    =========================================== *\/\r\n\r\n    slider.addEventListener(\r\n        \"dragstart\",\r\n        function (event) {\r\n\r\n            event.preventDefault();\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* ==========================================\r\n       INITIALIZE\r\n    =========================================== *\/\r\n\r\n    goToSlide(0);\r\n\r\n    startAutoplay();\r\n\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0627\u0644\u0639\u0644\u0648\u064a\u0648\u0646 \u062a\u0627\u0631\u064a\u062e \u0648\u0647\u0648\u064a\u0629 \u062d\u0643\u0627\u064a\u0629 \u0634\u0639\u0628 \u0648\u062c\u0630\u0648\u0631 \u0644\u0627 \u062a\u064f\u0646\u0633\u0649 \u0645\u0633\u0627\u062d\u0629 \u062a\u0647\u062a\u0645 \u0628\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0639\u0644\u0648\u064a\u064a\u0646 \u0648\u062a\u0631\u0627\u062b\u0647\u0645 \u0648\u062b\u0642\u0627\u0641\u062a\u0647\u0645\u060c \u0648\u062a\u0648\u062b\u0651\u0642 \u0627\u0644\u062d\u0643\u0627\u064a\u0627\u062a \u0627\u0644\u062a\u064a \u0635\u0646\u0639\u062a \u0627\u0644\u0630\u0627\u0643\u0631\u0629 \u0639\u0628\u0631 [&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":{"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":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","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-10","page","type-page","status-publish","hentry"],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/alawiin.com\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alawiin.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alawiin.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alawiin.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alawiin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":5,"href":"https:\/\/alawiin.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/alawiin.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/40"}],"wp:attachment":[{"href":"https:\/\/alawiin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}