{"id":15699,"date":"2026-08-08T06:12:35","date_gmt":"2026-08-08T06:12:35","guid":{"rendered":"https:\/\/www.smu.edu.ly\/?page_id=15699"},"modified":"2026-08-11T10:23:14","modified_gmt":"2026-08-11T10:23:14","slug":"mosque","status":"publish","type":"page","link":"https:\/\/www.smu.edu.ly\/ar\/mosque\/","title":{"rendered":"Mosque"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"15699\" class=\"elementor elementor-15699\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7538f57 e-flex e-con-boxed e-con e-parent\" data-id=\"7538f57\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bce5add elementor-widget elementor-widget-html\" data-id=\"bce5add\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>SMU Mosque &amp; Prayer Areas<\/title>\n\n<style>\n\n.smu-facility-page,\n.smu-facility-page * {\n    box-sizing: border-box;\n}\n\n.smu-facility-page {\n    --red: #cc0101;\n    --blue: #0029e9;\n    --dark: #1f2d42;\n    --text: #354055;\n    --muted: #6e7788;\n    --line: #e3e7ee;\n    --soft: #f5f7fb;\n    --white: #ffffff;\n\n    width: 100%;\n    margin: 0;\n    padding: 0;\n\n    font-family: Arial, \"Segoe UI\", sans-serif;\n    color: var(--text);\n    background: var(--soft);\n}\n\n.smu-facility-container {\n    width: min(1180px, calc(100% - 40px));\n    margin: 0 auto;\n}\n\n\/* =========================================================\n   GALLERY FIRST\n========================================================= *\/\n\n.smu-facility-gallery-section {\n    padding: 45px 0 35px;\n}\n\n.smu-facility-main {\n    width: 100%;\n    height: 560px;\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--line);\n    border-radius: 20px;\n    background: #eef1f6;\n    box-shadow: 0 18px 45px rgba(35, 49, 78, 0.10);\n}\n\n.smu-facility-main img {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: contain;\n    object-position: center;\n    background: #eef1f6;\n    transition: opacity 0.25s ease;\n}\n\n\/* ARROWS *\/\n\n.smu-facility-arrow {\n    width: 50px;\n    height: 50px;\n    position: absolute;\n    top: 50%;\n    z-index: 5;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: 1px solid rgba(255,255,255,0.7);\n    border-radius: 50%;\n    color: #ffffff;\n    background: rgba(0, 41, 233, 0.88);\n    box-shadow: 0 8px 20px rgba(0,0,0,0.18);\n    font-size: 21px;\n    font-weight: bold;\n    cursor: pointer;\n    transform: translateY(-50%);\n    transition: 0.25s ease;\n}\n\n.smu-facility-arrow:hover {\n    background: var(--red);\n}\n\n.smu-facility-prev {\n    left: 18px;\n}\n\n.smu-facility-next {\n    right: 18px;\n}\n\n\/* COUNTER *\/\n\n.smu-facility-counter {\n    min-width: 72px;\n    height: 36px;\n    position: absolute;\n    right: 18px;\n    bottom: 18px;\n    z-index: 5;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 14px;\n    border: 1px solid rgba(255,255,255,0.5);\n    border-radius: 30px;\n    color: #ffffff;\n    background: rgba(0, 41, 233, 0.90);\n    font-size: 12px;\n    font-weight: 800;\n}\n\n\/* THUMBNAILS *\/\n\n.smu-facility-thumbnails-box {\n    margin-top: 18px;\n    padding: 14px;\n    border: 1px solid var(--line);\n    border-radius: 16px;\n    background: var(--white);\n}\n\n.smu-facility-thumbnails {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 12px;\n}\n\n.smu-facility-thumb {\n    height: 120px;\n    position: relative;\n    overflow: hidden;\n    padding: 0;\n    border: 3px solid transparent;\n    border-radius: 11px;\n    background: #edf1f6;\n    cursor: pointer;\n    transition:\n        transform 0.2s ease,\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n}\n\n.smu-facility-thumb:hover {\n    transform: translateY(-2px);\n    border-color: rgba(0, 41, 233, 0.35);\n    box-shadow: 0 8px 18px rgba(0, 41, 233, 0.10);\n}\n\n.smu-facility-thumb.active {\n    border-color: var(--blue);\n    box-shadow:\n        0 0 0 3px rgba(0,41,233,0.1),\n        0 8px 20px rgba(0,41,233,0.15);\n}\n\n.smu-facility-thumb img {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: cover;\n    object-position: center;\n}\n\n.smu-facility-thumb-number {\n    width: 27px;\n    height: 27px;\n    position: absolute;\n    right: 6px;\n    bottom: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    color: #ffffff;\n    background: var(--blue);\n    font-size: 11px;\n    font-weight: 800;\n}\n\n.smu-facility-thumb.active .smu-facility-thumb-number {\n    background: var(--red);\n}\n\n\/* =========================================================\n   ABOUT \u2014 SAME ATTACHED CARD STYLE\n========================================================= *\/\n\n.smu-facility-intro-wrap {\n    padding: 10px 0 30px;\n}\n\n.smu-facility-intro-card {\n    max-width: 960px;\n    margin: 0 auto;\n    padding: 45px 55px;\n    text-align: center;\n    border: 1px solid var(--line);\n    border-radius: 22px;\n    background: var(--white);\n    box-shadow: 0 18px 45px rgba(35, 49, 78, 0.08);\n}\n\n.smu-facility-label {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    margin-bottom: 14px;\n    color: var(--red);\n    font-size: 12px;\n    font-weight: 800;\n    letter-spacing: 1.8px;\n    text-transform: uppercase;\n}\n\n.smu-facility-label::before,\n.smu-facility-label::after {\n    content: \"\";\n    width: 30px;\n    height: 3px;\n    border-radius: 30px;\n}\n\n.smu-facility-label::before {\n    background: var(--blue);\n}\n\n.smu-facility-label::after {\n    background: var(--red);\n}\n\n.smu-facility-intro-card h1 {\n    max-width: 800px;\n    margin: 0 auto;\n    color: var(--dark);\n    font-size: clamp(34px, 5vw, 52px);\n    font-weight: 800;\n    line-height: 1.1;\n    letter-spacing: -1.4px;\n}\n\n.smu-facility-intro-card p {\n    max-width: 780px;\n    margin: 18px auto 0;\n    color: var(--muted);\n    font-size: 15px;\n    line-height: 1.85;\n}\n\n.smu-facility-intro-accent {\n    width: 110px;\n    height: 5px;\n    display: flex;\n    overflow: hidden;\n    margin: 24px auto 0;\n    border-radius: 50px;\n}\n\n.smu-facility-intro-accent span {\n    flex: 1;\n}\n\n.smu-facility-intro-accent span:first-child {\n    background: var(--blue);\n}\n\n.smu-facility-intro-accent span:last-child {\n    background: var(--red);\n}\n\n\/* =========================================================\n   EXPLORE CAMPUS \u2014 SAME ATTACHED STYLE\n========================================================= *\/\n\n.smu-campus-explore {\n    padding: 10px 0 80px;\n}\n\n.smu-campus-explore-card {\n    padding: 40px;\n    border: 1px solid var(--line);\n    border-radius: 22px;\n    background: var(--white);\n    box-shadow: 0 18px 45px rgba(35, 49, 78, 0.07);\n}\n\n.smu-campus-explore-header {\n    max-width: 750px;\n    margin: 0 auto 28px;\n    text-align: center;\n}\n\n.smu-campus-explore-header span {\n    display: block;\n    margin-bottom: 8px;\n    color: var(--red);\n    font-size: 11px;\n    font-weight: 800;\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n}\n\n.smu-campus-explore-header h2 {\n    margin: 0;\n    color: var(--dark);\n    font-size: 32px;\n    font-weight: 800;\n    line-height: 1.2;\n}\n\n.smu-campus-explore-header p {\n    margin: 10px 0 0;\n    color: var(--muted);\n    font-size: 14px;\n    line-height: 1.7;\n}\n\n.smu-campus-menu {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 12px;\n}\n\n.smu-campus-menu a {\n    min-height: 68px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 15px;\n    padding: 16px 18px;\n    border: 1px solid var(--line);\n    border-radius: 12px;\n    color: var(--dark);\n    background: #ffffff;\n    font-size: 14px;\n    font-weight: 700;\n    text-decoration: none;\n    transition:\n        transform 0.2s ease,\n        border-color 0.2s ease,\n        box-shadow 0.2s ease,\n        color 0.2s ease;\n}\n\n.smu-campus-menu a::after {\n    content: \"\u2192\";\n    width: 30px;\n    height: 30px;\n    flex: 0 0 30px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    color: #ffffff;\n    background: var(--blue);\n    font-size: 15px;\n    transition: background 0.2s ease;\n}\n\n.smu-campus-menu a:hover {\n    transform: translateY(-2px);\n    border-color: rgba(0, 41, 233, 0.30);\n    color: var(--blue);\n    box-shadow: 0 8px 20px rgba(0, 41, 233, 0.08);\n}\n\n.smu-campus-menu a:hover::after {\n    background: var(--red);\n}\n\n.smu-campus-menu a.current {\n    color: #ffffff;\n    border-color: var(--blue);\n    background: var(--blue);\n}\n\n.smu-campus-menu a.current::after {\n    color: var(--red);\n    background: #ffffff;\n}\n\n\/* RESPONSIVE *\/\n\n@media (max-width: 900px) {\n    .smu-facility-main {\n        height: 440px;\n    }\n\n    .smu-facility-thumbnails {\n        grid-template-columns: repeat(2, 1fr);\n    }\n\n    .smu-campus-menu {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 600px) {\n    .smu-facility-container {\n        width: calc(100% - 24px);\n    }\n\n    .smu-facility-gallery-section {\n        padding: 28px 0 24px;\n    }\n\n    .smu-facility-main {\n        height: 295px;\n        border-radius: 14px;\n    }\n\n    .smu-facility-arrow {\n        width: 40px;\n        height: 40px;\n        font-size: 18px;\n    }\n\n    .smu-facility-prev {\n        left: 8px;\n    }\n\n    .smu-facility-next {\n        right: 8px;\n    }\n\n    .smu-facility-counter {\n        right: 9px;\n        bottom: 9px;\n        min-width: 64px;\n        height: 32px;\n    }\n\n    .smu-facility-thumbnails-box {\n        padding: 8px;\n    }\n\n    .smu-facility-thumbnails {\n        gap: 8px;\n    }\n\n    .smu-facility-thumb {\n        height: 88px;\n        border-width: 2px;\n        border-radius: 8px;\n    }\n\n    .smu-facility-intro-wrap {\n        padding: 10px 0 22px;\n    }\n\n    .smu-facility-intro-card {\n        padding: 30px 20px;\n        border-radius: 16px;\n    }\n\n    .smu-facility-label::before,\n    .smu-facility-label::after {\n        width: 20px;\n    }\n\n    .smu-facility-intro-card h1 {\n        font-size: 34px;\n        letter-spacing: -1px;\n    }\n\n    .smu-facility-intro-card p {\n        font-size: 14px;\n    }\n\n    .smu-campus-explore-card {\n        padding: 28px 15px;\n        border-radius: 16px;\n    }\n\n    .smu-campus-explore-header h2 {\n        font-size: 27px;\n    }\n\n    .smu-campus-menu {\n        grid-template-columns: 1fr;\n    }\n\n    .smu-campus-menu a {\n        min-height: 62px;\n    }\n}\n\n@media (max-width: 380px) {\n    .smu-facility-main {\n        height: 245px;\n    }\n\n    .smu-facility-thumb {\n        height: 75px;\n    }\n}\n\n<\/style>\n<\/head>\n\n<body>\n\n<section class=\"smu-facility-page\">\n<div class=\"smu-facility-container\">\n\n    <!-- =====================================================\n         1. GALLERY\n    ====================================================== -->\n    <div class=\"smu-facility-gallery-section\">\n\n        <div class=\"smu-facility-main\">\n            <img decoding=\"async\"\n                id=\"smuFacilityMainImage\"\n                src=\"https:\/\/www.smu.edu.ly\/wp-content\/uploads\/2026\/08\/%D8%A7%D9%84%D9%85%D8%B3%D8%AC%D8%AF.png\"\n                alt=\"Mosque &amp; Prayer Areas\"\n            >\n\n            <button class=\"smu-facility-arrow smu-facility-prev\" type=\"button\" aria-label=\"Previous image\">\n                &#10094;\n            <\/button>\n\n            <button class=\"smu-facility-arrow smu-facility-next\" type=\"button\" aria-label=\"Next image\">\n                &#10095;\n            <\/button>\n\n            <div class=\"smu-facility-counter\" id=\"smuFacilityCounter\">\n                1 \/ 2\n            <\/div>\n        <\/div>\n\n        <div class=\"smu-facility-thumbnails-box\">\n            <div class=\"smu-facility-thumbnails\">\n                <button class=\"smu-facility-thumb active\" type=\"button\" data-index=\"0\" aria-label=\"Show Mosque &amp; Prayer Areas image 1\">\n    <img decoding=\"async\" src=\"https:\/\/www.smu.edu.ly\/wp-content\/uploads\/2026\/08\/%D8%A7%D9%84%D9%85%D8%B3%D8%AC%D8%AF.png\" alt=\"Mosque &amp; Prayer Areas image 1\" loading=\"lazy\">\n    <span class=\"smu-facility-thumb-number\">1<\/span>\n<\/button>\n<button class=\"smu-facility-thumb\" type=\"button\" data-index=\"1\" aria-label=\"Show Mosque &amp; Prayer Areas image 2\">\n    <img decoding=\"async\" src=\"https:\/\/www.smu.edu.ly\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-02-12-at-3.04.32-PM.jpeg\" alt=\"Mosque &amp; Prayer Areas image 2\" loading=\"lazy\">\n    <span class=\"smu-facility-thumb-number\">2<\/span>\n<\/button>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <!-- =====================================================\n         2. ABOUT\n    ====================================================== -->\n    <div class=\"smu-facility-intro-wrap\">\n        <div class=\"smu-facility-intro-card\">\n\n            <span class=\"smu-facility-label\">\n                Faith &amp; Well-being\n            <\/span>\n\n            <h1>Mosque &amp; Prayer Areas<\/h1>\n\n            <p>The SMU mosque accommodates approximately 300 people. A dedicated women&#x27;s prayer area covers 380 m\u00b2 and accommodates 100 people. Together, these facilities provide convenient spaces for prayer, reflection, and spiritual well-being on campus.<\/p>\n\n            <div class=\"smu-facility-intro-accent\">\n                <span><\/span>\n                <span><\/span>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n    <!-- =====================================================\n         3. EXPLORE OTHER CAMPUS FACILITIES\n    ====================================================== -->\n    <div class=\"smu-campus-explore\">\n\n        <div class=\"smu-campus-explore-card\">\n\n            <div class=\"smu-campus-explore-header\">\n                <span>Discover SMU<\/span>\n\n                <h2>Explore Other Campus Facilities<\/h2>\n\n                <p>\n                    Discover more spaces and facilities across the\n                    South Mediterranean University campus.\n                <\/p>\n            <\/div>\n\n            <div class=\"smu-campus-menu\">\n                <a href=\"https:\/\/www.smu.edu.ly\/ar\/mosque\/\" class=\"current\">Mosque<\/a>\n<a href=\"https:\/\/www.smu.edu.ly\/ar\/main-library\/\">Main Library<\/a>\n<a href=\"https:\/\/www.smu.edu.ly\/ar\/administration-building\/\">Administration Building<\/a>\n<a href=\"https:\/\/www.smu.edu.ly\/ar\/clinics\/\">Clinics<\/a>\n<a href=\"https:\/\/www.smu.edu.ly\/ar\/laboratories\/\">Laboratories<\/a>\n<a href=\"https:\/\/www.smu.edu.ly\/ar\/restaurants-and-cafes\/\">Restaurants and Caf\u00e9s<\/a>\n<a href=\"https:\/\/www.smu.edu.ly\/ar\/fitness-and-athletics\/\">Fitness and Athletics<\/a>\n<a href=\"https:\/\/www.smu.edu.ly\/ar\/parking-areas\/\">Parking Areas<\/a>\n<a href=\"https:\/\/www.smu.edu.ly\/ar\/theater\/\">Theater<\/a>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/div>\n<\/section>\n\n<script>\n(function () {\n\n    const images = [\"https:\/\/www.smu.edu.ly\/wp-content\/uploads\/2026\/08\/%D8%A7%D9%84%D9%85%D8%B3%D8%AC%D8%AF.png\", \"https:\/\/www.smu.edu.ly\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-02-12-at-3.04.32-PM.jpeg\"];\n    let currentIndex = 0;\n\n    const mainImage = document.getElementById(\"smuFacilityMainImage\");\n    const counter = document.getElementById(\"smuFacilityCounter\");\n    const thumbnails = document.querySelectorAll(\".smu-facility-thumb\");\n    const previousButton = document.querySelector(\".smu-facility-prev\");\n    const nextButton = document.querySelector(\".smu-facility-next\");\n    const galleryMain = document.querySelector(\".smu-facility-main\");\n\n    function showImage(index) {\n        if (!images.length) return;\n\n        currentIndex = (index + images.length) % images.length;\n\n        mainImage.style.opacity = \"0\";\n\n        setTimeout(function () {\n            mainImage.src = images[currentIndex];\n            mainImage.alt = \"Mosque & Prayer Areas\" + \" image \" + (currentIndex + 1);\n            mainImage.style.opacity = \"1\";\n        }, 100);\n\n        counter.textContent = (currentIndex + 1) + \" \/ \" + images.length;\n\n        thumbnails.forEach(function (thumbnail, index) {\n            thumbnail.classList.toggle(\"active\", index === currentIndex);\n        });\n    }\n\n    thumbnails.forEach(function (thumbnail) {\n        thumbnail.addEventListener(\"click\", function () {\n            showImage(parseInt(this.dataset.index, 10));\n        });\n    });\n\n    previousButton.addEventListener(\"click\", function () {\n        showImage(currentIndex - 1);\n    });\n\n    nextButton.addEventListener(\"click\", function () {\n        showImage(currentIndex + 1);\n    });\n\n    document.addEventListener(\"keydown\", function (event) {\n        if (event.key === \"ArrowRight\") showImage(currentIndex + 1);\n        if (event.key === \"ArrowLeft\") showImage(currentIndex - 1);\n    });\n\n    let touchStartX = 0;\n\n    galleryMain.addEventListener(\"touchstart\", function (event) {\n        touchStartX = event.changedTouches[0].clientX;\n    }, { passive: true });\n\n    galleryMain.addEventListener(\"touchend\", function (event) {\n        const touchEndX = event.changedTouches[0].clientX;\n        const distance = touchEndX - touchStartX;\n\n        if (Math.abs(distance) < 50) return;\n\n        if (distance < 0) {\n            showImage(currentIndex + 1);\n        } else {\n            showImage(currentIndex - 1);\n        }\n    }, { passive: true });\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>SMU Mosque &amp; Prayer Areas &#10094; &#10095; 1 \/ 2 1 2 Faith &amp; Well-being Mosque &amp; Prayer Areas The SMU mosque accommodates approximately 300 people. A dedicated women&#x27;s prayer area covers 380 m\u00b2 and accommodates 100 people. Together, these facilities provide convenient spaces for prayer, reflection, and spiritual well-being on campus. Discover SMU Explore [&hellip;]<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-15699","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.smu.edu.ly\/ar\/wp-json\/wp\/v2\/pages\/15699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.smu.edu.ly\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.smu.edu.ly\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.smu.edu.ly\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.smu.edu.ly\/ar\/wp-json\/wp\/v2\/comments?post=15699"}],"version-history":[{"count":16,"href":"https:\/\/www.smu.edu.ly\/ar\/wp-json\/wp\/v2\/pages\/15699\/revisions"}],"predecessor-version":[{"id":15979,"href":"https:\/\/www.smu.edu.ly\/ar\/wp-json\/wp\/v2\/pages\/15699\/revisions\/15979"}],"wp:attachment":[{"href":"https:\/\/www.smu.edu.ly\/ar\/wp-json\/wp\/v2\/media?parent=15699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}