diff --git a/assets/css/carousel.css b/assets/css/carousel.css
new file mode 100644
index 0000000..196d2b6
--- /dev/null
+++ b/assets/css/carousel.css
@@ -0,0 +1,160 @@
+/* GLOBAL STYLES
+-------------------------------------------------- */
+/* Padding below the footer and lighter body text */
+
+body {
+ padding-top: 3rem;
+ padding-bottom: 3rem;
+ color: rgb(var(--bs-tertiary-color-rgb));
+}
+
+
+/* CUSTOMIZE THE CAROUSEL
+-------------------------------------------------- */
+
+/* Carousel base class */
+.carousel {
+ margin-bottom: 4rem;
+}
+/* Since positioning the image, we need to help out the caption */
+.carousel-caption {
+ bottom: 3rem;
+ z-index: 10;
+}
+
+/* Declare heights because of positioning of img element */
+.carousel-item {
+ height: 32rem;
+}
+
+
+/* MARKETING CONTENT
+-------------------------------------------------- */
+
+/* Center align the text within the three columns below the carousel */
+.marketing .col-lg-4 {
+ margin-bottom: 1.5rem;
+ text-align: center;
+}
+/* rtl:begin:ignore */
+.marketing .col-lg-4 p {
+ margin-right: .75rem;
+ margin-left: .75rem;
+}
+/* rtl:end:ignore */
+
+
+/* Featurettes
+------------------------- */
+
+.featurette-divider {
+ margin: 5rem 0; /* Space out the Bootstrap
more */
+}
+
+/* Thin out the marketing headings */
+/* rtl:begin:remove */
+.featurette-heading {
+ letter-spacing: -.05rem;
+}
+
+/* rtl:end:remove */
+
+/* RESPONSIVE CSS
+-------------------------------------------------- */
+
+@media (min-width: 40em) {
+ /* Bump up size of carousel content */
+ .carousel-caption p {
+ margin-bottom: 1.25rem;
+ font-size: 1.25rem;
+ line-height: 1.4;
+ }
+
+ .featurette-heading {
+ font-size: 50px;
+ }
+}
+
+@media (min-width: 62em) {
+ .featurette-heading {
+ margin-top: 7rem;
+ }
+}
+
+.bd-placeholder-img {
+ font-size: 1.125rem;
+ text-anchor: middle;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+
+@media (min-width: 768px) {
+ .bd-placeholder-img-lg {
+ font-size: 3.5rem;
+ }
+}
+
+.b-example-divider {
+ width: 100%;
+ height: 3rem;
+ background-color: rgba(0, 0, 0, .1);
+ border: solid rgba(0, 0, 0, .15);
+ border-width: 1px 0;
+ box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.b-example-vr {
+ flex-shrink: 0;
+ width: 1.5rem;
+ height: 100vh;
+}
+
+.bi {
+ vertical-align: -.125em;
+ fill: currentColor;
+}
+
+.nav-scroller {
+ position: relative;
+ z-index: 2;
+ height: 2.75rem;
+ overflow-y: hidden;
+}
+
+.nav-scroller .nav {
+ display: flex;
+ flex-wrap: nowrap;
+ padding-bottom: 1rem;
+ margin-top: -1px;
+ overflow-x: auto;
+ text-align: center;
+ white-space: nowrap;
+ -webkit-overflow-scrolling: touch;
+}
+
+.btn-bd-primary {
+ --bd-violet-bg: #712cf9;
+ --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
+
+ --bs-btn-font-weight: 600;
+ --bs-btn-color: var(--bs-white);
+ --bs-btn-bg: var(--bd-violet-bg);
+ --bs-btn-border-color: var(--bd-violet-bg);
+ --bs-btn-hover-color: var(--bs-white);
+ --bs-btn-hover-bg: #6528e0;
+ --bs-btn-hover-border-color: #6528e0;
+ --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+ --bs-btn-active-color: var(--bs-btn-hover-color);
+ --bs-btn-active-bg: #5a23c8;
+ --bs-btn-active-border-color: #5a23c8;
+}
+
+.bd-mode-toggle {
+ z-index: 1500;
+}
+
+.bd-mode-toggle .dropdown-menu .active .bi {
+ display: block !important;
+}
+
diff --git a/assets/css/feature.css b/assets/css/feature.css
new file mode 100644
index 0000000..9af945d
--- /dev/null
+++ b/assets/css/feature.css
@@ -0,0 +1,27 @@
+.feature-icon {
+ width: 4rem;
+ height: 4rem;
+ border-radius: .75rem;
+ }
+
+ .icon-square {
+ width: 3rem;
+ height: 3rem;
+ border-radius: .75rem;
+ }
+
+ .text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
+ .text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
+ .text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }
+
+ .card-cover {
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: cover;
+ }
+
+ .feature-icon-small {
+ width: 3rem;
+ height: 3rem;
+ }
+
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..c1c4610
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
+
+html, body {
+ font-family: "Rubik", sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 400;
+ font-style: normal;
+}
\ No newline at end of file
diff --git a/assets/js/color-modes.js b/assets/js/color-modes.js
new file mode 100644
index 0000000..8a0dabf
--- /dev/null
+++ b/assets/js/color-modes.js
@@ -0,0 +1,80 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+ 'use strict'
+
+ const getStoredTheme = () => localStorage.getItem('theme')
+ const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+ const getPreferredTheme = () => {
+ const storedTheme = getStoredTheme()
+ if (storedTheme) {
+ return storedTheme
+ }
+
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+ }
+
+ const setTheme = theme => {
+ if (theme === 'auto') {
+ document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+ } else {
+ document.documentElement.setAttribute('data-bs-theme', theme)
+ }
+ }
+
+ setTheme(getPreferredTheme())
+
+ const showActiveTheme = (theme, focus = false) => {
+ const themeSwitcher = document.querySelector('#bd-theme')
+
+ if (!themeSwitcher) {
+ return
+ }
+
+ const themeSwitcherText = document.querySelector('#bd-theme-text')
+ const activeThemeIcon = document.querySelector('.theme-icon-active use')
+ const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+ const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+ document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+ element.classList.remove('active')
+ element.setAttribute('aria-pressed', 'false')
+ })
+
+ btnToActive.classList.add('active')
+ btnToActive.setAttribute('aria-pressed', 'true')
+ activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+ const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+ themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+ if (focus) {
+ themeSwitcher.focus()
+ }
+ }
+
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+ const storedTheme = getStoredTheme()
+ if (storedTheme !== 'light' && storedTheme !== 'dark') {
+ setTheme(getPreferredTheme())
+ }
+ })
+
+ window.addEventListener('DOMContentLoaded', () => {
+ showActiveTheme(getPreferredTheme())
+
+ document.querySelectorAll('[data-bs-theme-value]')
+ .forEach(toggle => {
+ toggle.addEventListener('click', () => {
+ const theme = toggle.getAttribute('data-bs-theme-value')
+ setStoredTheme(theme)
+ setTheme(theme)
+ showActiveTheme(theme, true)
+ })
+ })
+ })
+})()
diff --git a/contact.php b/contact.php
new file mode 100644
index 0000000..e69de29
diff --git a/facilities.php b/facilities.php
new file mode 100644
index 0000000..e69de29
diff --git a/gallery.php b/gallery.php
new file mode 100644
index 0000000..e69de29
diff --git a/includes/footer.php b/includes/footer.php
index b91a2e3..8506ee2 100644
--- a/includes/footer.php
+++ b/includes/footer.php
@@ -1,5 +1,19 @@
-
-
-
+
+
+
+
-