Merge branch 'main' into dev

Css-files/content.css

@@ -2,11 +2,53 @@
 	margin: 0px;
 	padding: 0px;
 }
-
-body {
-	background-color: black;
+:root {
+    --background-color: white;
+    --text-color: black;
+    --primary-color: rgb(204, 12, 12);
+    --secondary-color: rgb(177, 0, 0);
+    --tertiary-color: orangered;
+    --container-bg: rgb(224, 224, 252);
+    --filter-bg: transparent;
+    --contact-bg: rgb(208, 50, 50);
+    --button-bg: #ec0f25e3;
+    --button-hover-bg: rgba(208, 50, 50, 0.9);
+    --card-border: rgb(186, 186, 201);
+    --card-shadow: rgba(224, 224, 252, 0.678);
+    --link-color: rgb(177, 0, 0);
+    --pagination-bg: white;
+    --pagination-active-bg: rgb(177, 0, 0);
+    --pagination-btn-color: rgb(177, 0, 0);
+    --pagination-prev-next-bg: rgb(204, 12, 12);
+    --filter-text-color: black;
+    --filter-border-color: #dc3545;
+}
+
+.dark-theme  {
+    --background-color: black;
+    --text-color: white;
+    --primary-color: rgb(204, 12, 12);
+    --secondary-color: rgb(177, 0, 0);
+    --tertiary-color: orangered;
+    --container-bg: rgb(35, 35, 35);
+    --filter-bg: rgba(0, 0, 0, 0.6);
+    --contact-bg: rgb(208, 50, 50);
+    --button-bg: #ec0f25e3;
+    --button-hover-bg: rgba(208, 50, 50, 0.9);
+    --card-border: rgb(100, 100, 100);
+    --card-shadow: rgba(0, 0, 0, 0.5);
+    --link-color: rgb(177, 0, 0);
+    --pagination-bg: #2e2e2e;
+    --pagination-active-bg: rgb(177, 0, 0);
+    --pagination-btn-color: rgb(177, 0, 0);
+    --pagination-prev-next-bg: rgb(204, 12, 12);
+    --filter-text-color: white;
+    --filter-border-color: #dc3545;
+}
+/* body {
+	background-color: var(--background-color);
 	overflow-x: hidden;
-}
+} */
 
 /* MENU + LOGIN + SIGNUP + CONTACT PAGE */
 .head_container {
@@ -42,7 +84,7 @@ body {
 /* MENU PAGE SPECIFICS */
 .menu-container {
 	padding: 55px 10px 30px 10px;
-	background-color: rgb(224, 224, 252);
+	background-color: var(--background-color)
 }
 
 .menu-container .container-fluid {
@@ -77,7 +119,7 @@ body {
 
 .menu-container .nav-pills .nav-link.active {
 	background-color: rgb(204, 12, 12);
-	color: white;
+	/* color: white; */
 }
 
 .menu-items .row {
@@ -287,7 +329,7 @@ body {
 .contact-wrapper .text{
 	font-size: 1rem;
 	line-height: 1.5;
-	color: #080808;
+	color: var(--text-color);
 	margin-bottom: 2rem;
 }
 
@@ -322,7 +364,7 @@ body {
 	align-items: center; /* Center items vertically */
 	margin-bottom: 20px;
 	padding: 15px;
-	background-color: #fff;
+	background-color: var(--background-color);
 	border-radius: 20px;
 	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 	transition: transform 0.4s, box-shadow 0.4s, background-color 0.4s;
@@ -421,7 +463,7 @@ body {
   }
 */
 .contact-form-wrapper {
-	background-color: white;
+	background-color:var(--container-bg);
 	padding: 30px 0;
   }
 
@@ -666,7 +708,9 @@ body {
 .testimonal__container {
 	display: flex;
 }
-
+.nav-link {
+	color:var(--a)
+}
 .testimonal__card {
 	text-align: center;
 	padding: 2rem 3rem 2.5rem;