diff --git a/src/styles/colors.scss b/src/styles/colors.scss
new file mode 100644
index 0000000..4f0d084
--- /dev/null
+++ b/src/styles/colors.scss
@@ -0,0 +1,31 @@
+:root {
+  --black: #000;
+  --very-dark-gray2: #181818;
+  --very-dark-gray: #252525;
+  --tooltip-bg-color: #2d2d2d;
+  --primary: #363738;
+  --brown: #504242;
+  --dark-gray: #4C5355;
+  --light-gray: #7D8184;
+  --regular-light-gray: #999999;
+  --gray-blue: #848d97;
+  --light-blue: #A0BCE0;
+  --medium-light-gray: #cbcbcb;
+  --very-light-gray: #EDEDED;
+  --very-light-gray2: #f5f5f5;
+  --secondary-white: #FAFAFA;
+  --skeleton-color1: #f6f7f8;
+  --skeleton-color2: #edeef1;
+  --website-bg: #fdfdfd;
+  --white: #fff;
+  --dark-red: #A22F2F;
+  --dark-tomato: #B40404;
+  --tomato: #db4444;
+  --red: #ff0000;
+  --orange-degree2: #ff8d23;
+  --rose: #E07575;
+  --green: #078639;
+  --blue: #4493f8;
+  --turquoise: #4AC2E8;
+  --yellow: #fffb19;
+}
\ No newline at end of file
diff --git a/src/styles/fonts.css b/src/styles/fonts.css
new file mode 100644
index 0000000..1d4c7b2
--- /dev/null
+++ b/src/styles/fonts.css
@@ -0,0 +1,132 @@
+/* Poppins */
+@font-face {
+  font-family: "Poppins";
+  src: url("../Fonts/Poppins/Poppins-Light.ttf"), format("ttf");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("../Fonts/Poppins/Poppins-Regular.ttf"), format("ttf");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("../Fonts/Poppins/Poppins-Medium.ttf"), format("ttf");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("../Fonts/Poppins/Poppins-SemiBold.ttf"), format("ttf");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("../Fonts/Poppins/Poppins-Bold.ttf"), format("ttf");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("../Fonts/Poppins/Poppins-ExtraBold.ttf"), format("ttf");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+
+/* Inter */
+@font-face {
+  font-family: "Inter";
+  src: url("../Fonts/Inter/Inter-Light.ttf"), format("ttf");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("../Fonts/Inter/Inter-Regular.ttf"), format("ttf");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("../Fonts/Inter/Inter-Medium.ttf"), format("ttf");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("../Fonts/Inter/Inter-SemiBold.ttf"), format("ttf");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("../Fonts/Inter/Inter-Bold.ttf"), format("ttf");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+
+/* Rubik */
+@font-face {
+  font-family: "Rubik";
+  src: url("../Fonts/Rubik/Rubik-Light.ttf"), format("ttf");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Rubik";
+  src: url("../Fonts/Rubik/Rubik-Regular.ttf"), format("ttf");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Rubik";
+  src: url("../Fonts/Rubik/Rubik-Medium.ttf"), format("ttf");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Rubik";
+  src: url("../Fonts/Rubik/Rubik-SemiBold.ttf"), format("ttf");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Rubik";
+  src: url("../Fonts/Rubik/Rubik-Bold.ttf"), format("ttf");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
new file mode 100644
index 0000000..d32c74b
--- /dev/null
+++ b/src/styles/main.scss
@@ -0,0 +1,162 @@
+@import "./variables.scss";
+@import "./colors.scss";
+@import "./mixins.scss";
+@import "./fonts.css";
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+::selection {
+  color: var(--black);
+  background-color: rgba(255, 255, 0, .8);
+}
+
+html {
+  scroll-behavior: smooth;
+  color-scheme: light;
+}
+
+body {
+  background-color: var(--website-bg);
+  font-family: "Poppins";
+}
+
+body::-webkit-scrollbar {
+  width: 14px;
+}
+
+body::-webkit-scrollbar-thumb {
+  min-height: 120px;
+  border: 3px solid var(--website-bg);
+  border-radius: 4px;
+  background-color: #cbcbcb;
+}
+
+body::-webkit-scrollbar-thumb:hover {
+  background-color: #c3c2c2;
+}
+
+body::-webkit-scrollbar-thumb:active {
+  background-color: #afafaf;
+}
+
+.App {
+  outline: none;
+}
+
+.container {
+  width: var(--container-width);
+  margin: 0 auto;
+}
+
+@include medium {
+  .container {
+    width: var(--container-mobile-width);
+  }
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+input,
+button {
+  outline: none;
+}
+
+button {
+  user-select: none;
+  cursor: pointer;
+}
+
+li {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+i {
+  user-select: none;
+  cursor: pointer;
+}
+
+svg {
+  display: flex;
+}
+
+main {
+  min-height: 100vh;
+}
+
+.skip-content {
+  position: absolute;
+  left: -150%;
+  top: 0;
+  color: var(--white);
+  background-color: var(--blue);
+  padding: 15px 30px;
+  outline: none;
+  border-radius: 6px;
+  z-index: 100;
+  transition: left .4s ease;
+
+  &:focus {
+    left: 0;
+  }
+}
+
+.toolTip {
+  display: inline-block;
+  position: absolute;
+  width: max-content;
+  height: 24px;
+  text-align: center;
+  background-color: var(--tooltip-bg-color);
+  color: var(--white);
+  border-radius: 5px;
+  padding: 0 10px;
+  font-size: .9rem;
+  user-select: none;
+  translate: -50% -50%;
+  opacity: 0;
+  z-index: 9;
+  pointer-events: none;
+  @include center-x-y;
+  transition: opacity .1s ease;
+}
+
+*:hover+[data-is-tooltip=true],
+*:hover>[data-is-tooltip=true] {
+  opacity: 1;
+  pointer-events: all;
+}
+
+// Arabic styles
+[lang=ar] * {
+  font-family: "Rubik";
+}
+
+[lang=ar] :where(h2, b) {
+  letter-spacing: -1px !important;
+}
+
+[lang=ar] p {
+  font-size: 1.1rem;
+  line-height: 1.5;
+}
+
+[lang=ar] .skip-content {
+  left: auto;
+  right: -150%;
+
+  &:focus {
+    right: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
new file mode 100644
index 0000000..251e89c
--- /dev/null
+++ b/src/styles/mixins.scss
@@ -0,0 +1,37 @@
+@mixin center-x-y {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin prefix($property, $value) {
+  -webkit-#{$property}: $value;
+  -moz-#{$property}: $value;
+  -o-#{$property}: $value;
+  -ms-#{$property}: $value;
+  $property: $value;
+}
+
+@mixin large {
+  @media (max-width: 1200px) {
+    @content
+  }
+};
+
+@mixin medium {
+  @media (max-width: 992px) {
+    @content
+  }
+};
+
+@mixin small {
+  @media (max-width: 768px) {
+    @content
+  }
+};
+
+@mixin very-small {
+  @media (max-width: 376px) {
+    @content
+  }
+}
\ No newline at end of file
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..7c67d14
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,15 @@
+:root {
+  --container-width: 85%;
+  --container-mobile-width: 94%;
+  --page-margin: 60px 0 100px;
+  --button-active-scale: .991;
+  --outline-transition: outline .25s cubic-bezier(.645, .045, .355, 1);
+}
+
+:root {
+  --swiper-pagination-bullet-inactive-color: var(--very-light-gray);
+  --swiper-pagination-bullet-inactive-opacity: .6;
+  --swiper-pagination-bullet-horizontal-gap: 6px;
+  --swiper-pagination-bullet-size: 12px;
+  --swiper-pagination-color: var(--tomato);
+}
\ No newline at end of file