reordering css components

src/assets/css/App.scss

@@ -1,12 +1,6 @@
 @import "./generalites/typography.scss";
-@import "./components/CountrySelect.scss";
-@import "./components/Nav.scss";
-@import "./components/LanguageSelect.scss";
-@import "./components/Page-container.scss";
-@import "./components/DropdownSelect.scss";
 @import "./components/Score.scss";
 @import "./components/Timer.scss";
-@import "./components/Logo.scss";
 @import "./components/ExtraControls.scss";
 @import "./components/GameQuestion.scss";
 @import "./components/Titling.scss";
@@ -14,6 +8,14 @@
 @import "./components/Help.scss";
 @import "./components/GameAnswerExplanation.scss";
 @import "./components/Tutorials.scss";
+
+@import "./components/layout/Nav.scss";
+@import "./components/layout/Logo.scss";
+@import "./components/layout/Page-container.scss";
+
+@import "./components/ui/CountrySelect.scss";
+@import "./components/ui/LanguageSelect.scss";
+@import "./components/ui/DropdownSelect.scss";
 @import "./components/ui/Modal.scss";
 @import "./components/ui/Cta.scss";
 @import "./components/ui/AppLogo.scss";

src/assets/css/components/Nav.scss

@@ -1,4 +0,0 @@
-nav.main-menu {
-	@apply bg-red-500 absolute top-0 py-3 w-full flex justify-between;
-	z-index: 2;
-}

src/assets/css/components/layout/Nav.scss

@@ -0,0 +1,4 @@
+nav.main-menu {
+	@apply absolute top-0 py-3 w-full flex justify-end;
+	z-index: 2;
+}

src/assets/css/components/layout/Page-container.scss

@@ -18,7 +18,7 @@
 
 		&__content {
 			@apply text-center pt-12 px-16 w-fit mx-auto h-auto overflow-visible relative;
-			background-image: url("../../img/mask.svg");
+			background-image: url("../../../img/mask.svg");
 			background-position: center;
 			background-size: cover;
 			// padding-bottom: -100px;

src/assets/css/components/ui/CountrySelect.scss

@@ -30,7 +30,7 @@
 			@apply block w-4 h-4  absolute right-5
 			bg-center bg-no-repeat bg-contain;
 			content: "";
-			background-image: url("../../img/select_deploy_icon.svg");
+			background-image: url("../../../img/select_deploy_icon.svg");
 		}
 		&:hover {
 			&:after {

src/assets/css/components/ui/DropdownSelect.scss

@@ -20,7 +20,7 @@
 			@apply block w-4 h-4  absolute right-5
 			bg-center bg-no-repeat bg-contain;
 			content: "";
-			background-image: url("../../img/select_deploy_icon.svg");
+			background-image: url("../../../img/select_deploy_icon.svg");
 		}
 		&:hover {
 			&:after {

src/assets/css/components/ui/LanguageSelect.scss

@@ -1,7 +1,7 @@
 .language-select {
 	@apply relative flex flex-wrap gap-4;
 	@apply bg-transparent;
-	background-image: url("../../img/shapes-background/language-selector-background.svg");
+	background-image: url("../../../img/shapes-background/language-selector-background.svg");
 	background-size: 100% 100%;
 	background-repeat: no-repeat;
 	box-sizing: border-box;
@@ -47,7 +47,7 @@
 			@apply block w-4 h-4 absolute right-5
 			bg-center bg-no-repeat bg-contain;
 			content: "";
-			background-image: url("../../img/select_deploy_icon.svg");
+			background-image: url("../../../img/select_deploy_icon.svg");
 		}
 		&:hover {
 			&:after {