pushing all files

2025-08-30 11:03:32 +03:00
parent fd2dcf0daa
commit 81b875023b
510 changed files with 81710 additions and 0 deletions
--- a/public/assets/sass/default/_all.scss
+++ b/public/assets/sass/default/_all.scss
@ -0,0 +1,4 @@
+@import 'common';
+@import 'color';
+@import 'dark';
+@import 'space';
--- a/public/assets/sass/default/_color.scss
+++ b/public/assets/sass/default/_color.scss
@ -0,0 +1,48 @@
+/*==========================================================================
+Conbix Color CSS
+==========================================================================*/
+:root {
+    --body-font: 'Manrope', sans-serif;
+    --heading-font: 'Urbanist', sans-serif;
+    --text-white: #FFFFFF;
+    --bg-white: #FFFFFF;
+    --btn-white: #FFFFFF;
+    --border-white: #FFFFFF;
+    --black: #000000;
+    --primary-color-1: #F94C30;
+    --primary-color-2: #FCA028;
+    --primary-color-3: #406AFF;
+    --bg-heading-color: #131313;
+    --text-heading-color: #131313;
+    --btn-heading-color: #131313;
+    --body-color: #343434;
+    --dark-one: #1C1E22;
+    --dark-two: #222429;
+    --color-1: #1D2122;
+    --color-2: #676767;
+    --color-3: #999999;
+    --color-4: #CCCCCC;
+    --color-5: #F1F8FB; 
+    --color-6: #F4F4F4;
+    --color-7: #FEDBD6;
+    --color-8: #E8E8E8;
+    --color-9: #F2F6F9;
+    --color-10: #ECECEC;
+    --color-11: #2B2B2B;
+    --color-12: #FEE3BF;
+    --color-13: #CFCFCF;
+    --color-14: #FDC67E;
+    --color-15: #ACBDF8;
+    --color-16: #E1E1E1;
+    --color-17: #feedea;
+    --color-18: #151718;
+    --color-19: #3B3838;
+    --color-20: #808287;
+    --color-21: rgba(34, 36, 41, 0.5);
+    --border-color-1: #E7E7E7;
+    --border-color-2: #E9E9E8;
+    --border-color-3: rgba(19, 19, 19, 0.1);
+    --border-color-4: rgba(19, 19, 19, 0.06);;
+    --box-shadow-1: 0px 25px 70px rgba(0, 0, 0, 0.08);
+    --box-shadow-2: 0px 10px 70px rgba(0, 0, 0, 0.1);
+}
--- a/public/assets/sass/default/_common.scss
+++ b/public/assets/sass/default/_common.scss
@ -0,0 +1,925 @@
+/*------------------------------------------------------------------------
+
+Template Name:  Conbix - Business Consulting Next js Template
+Author:  ThemeOri
+Author URI: http://themeori.com
+Version: 1.0.2
+Description: This Template is created for web template
+
+--------------------------------------------------------------------------
+TABLE OF CONTENTS
+--------------------------------------------------------------------------
+
+* Google Fonts
+* Common CSS
+* Form CSS
+* Hedging  CSS
+* Conbix Button And Title Styles CSS
+* Conbix Text Style CSS
+* Scroll Top CSS
+* Preloader CSS
+* Animation CSS
+* Conbix Color CSS
+* Dark CSS
+* Dark Light Switch CSS
+* Space And Container CSS
+* Top Bar CSS
+* Top Bar Three CSS
+* Menu Bar Sticky CSS
+* Menu Bar CSS
+* Menu Sidebar CSS
+* Header Two CSS
+* Header Three CSS
+* Menu Responsive CSS
+* Banner One CSS
+* Banner Two CSS
+* Banner Three CSS
+* About One CSS
+* About Two CSS
+* About Three CSS
+* About Company CSS
+* Company Two CSS
+* About Solution CSS
+* Company History CSS
+* Features CSS
+* Consulting CSS
+* Work CSS
+* Services CSS
+* Services Two CSS
+* Services Three CSS
+* Services Page CSS
+* Services Details CSS
+* Cta CSS
+* Cta Two CSS
+* Get In Touch CSS
+* Get In Touch Three CSS
+* Help CSS
+* Pricing CSS
+* Pricing Two CSS
+* Team CSS
+* Team Two CSS
+* Team Three CSS
+* Team Details CSS
+* Testimonial CSS
+* Testimonial Two CSS
+* Choose Us CSS
+* FAQ CSS
+* FAQ Two CSS
+* Project CSS
+* Portfolio One CSS
+* Portfolio Two CSS
+* Portfolio Three CSS
+* Conbix Filter CSS
+* Project Filter CSS
+* Project Details CSS
+* Solution CSS
+* Solution Two CSS
+* Experience CSS
+* Subscribe One CSS
+* Subscribe Two CSS
+* Blog One CSS
+* Blog Two CSS
+* Blog Three CSS
+* News Details CSS
+* News Standard CSS
+* Conbix Contact CSS
+* Contact Page CSS
+* Contact Two CSS
+* Contact Three CSS
+* Contact Four CSS
+* Request Quote CSS
+* Footer Top CSS
+* Footer One CSS
+* Footer Two CSS
+* Footer Three CSS
+* All Footer CSS
+* Copyright One CSS
+* Copyright Two CSS
+* Copyright Three CSS
+* All Side Bar CSS
+* Post CSS
+* Theme Pagination CSS
+* Page Banner CSS
+* Error CSS
+* Contact CSS
+
+/*==========================================================================
+Common CSS
+==========================================================================*/
+body {
+	font-family: var(--body-font);
+	color: var(--body-color);
+	font-size: 16px;
+	line-height: 26px;
+  	font-weight: 400;
+	text-transform: capitalize;
+}
+img {
+	max-width: 100%;
+	height: auto;
+	transition: 0.4s;
+}
+a {  
+  outline: none;
+  color: inherit;
+  text-decoration: none;
+}
+a,
+button,
+i {
+	text-decoration: none;
+	color: inherit;
+}
+a:focus,
+a:hover {
+	text-decoration: none;
+	color: inherit;
+}
+.section-padding {
+	padding: 120px 0;
+}
+.section-padding-two {
+	padding: 95px 0 120px 0;
+}
+@media (max-width: 575px) {
+	.section-padding {
+		padding: 90px 0;
+	}
+	.section-padding-two {
+		padding: 65px 0 90px 0;
+	}
+}
+.display-none {
+	display: none;
+}
+.display-block {
+	display: block;
+}
+.filter img {
+	filter: grayscale(100%);
+}
+.img__full {
+	width: 100%;
+}
+/*==========================================================================
+Form CSS
+==========================================================================*/
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+	border: 1px solid var(--border-color-2);
+	border-color: transparent;
+	border-radius: 6px;
+	background: var(--primary-color-1);
+	color: var(--text-white);
+	padding: 17px 40px;
+}
+button:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover,
+input[type="submit"]:hover {
+  	border-color: transparent;
+}
+button:active,
+button:focus,
+input[type="button"]:active,
+input[type="button"]:focus,
+input[type="reset"]:active,
+input[type="reset"]:focus,
+input[type="submit"]:active,
+input[type="submit"]:focus {
+  	border-color: transparent;
+}
+input[type="text"],
+input[type="email"],
+input[type="url"],
+input[type="password"],
+input[type="search"],
+input[type="number"],
+input[type="tel"],
+input[type="range"],
+input[type="date"],
+input[type="month"],
+input[type="week"],
+input[type="time"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="color"],
+textarea {
+	color: var(--body-color);
+	border-radius: 6px;
+	width: 100%;
+	height: 60px;
+	border: 1px solid var(--border-color-2);
+	padding: 0 15px;
+	background: var(--bg-white);
+}
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
+input[type="number"]:focus,
+input[type="tel"]:focus,
+input[type="range"]:focus,
+input[type="date"]:focus,
+input[type="month"]:focus,
+input[type="week"]:focus,
+input[type="time"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+input[type="color"]:focus,
+textarea:focus {
+	color: var(--text-heading-color);
+	outline: none;
+	box-shadow: none;
+	border-color: var(--primary-color-1);
+}
+select {
+	border: 1px solid var(--border-color-2);
+}
+textarea {
+	width: 100%;
+	height: 150px;
+	padding-top: 15px;
+}
+button,
+button:hover,
+button:focus {
+	box-shadow: none;
+	border: none;
+	outline: none;
+}
+/*==========================================================================
+Hedging CSS
+==========================================================================*/
+$list: (h1, 70px, 80px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
+(h2, 48px, 60px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
+(h3, 30px, 40px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
+(h4, 24px, 34px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
+(h5, 22px, 32px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
+(h6, 20px, 30px, 0, 0, var(--text-heading-color), var(--heading-font), 700),
+(p, 16px, 30px, 0, 0);
+@each $name, $size, $height, $p, $m, $color, $font, $weight in $list {
+    #{$name}{
+      font-size: $size;
+      line-height: $height;
+      padding: $p;
+      margin: $m;
+      color: $color;
+      font-family: $font;
+      font-weight: $weight;
+    }
+}
+$list: left, center, right;
+@each $i in $list {
+    .t-#{$i} {
+        text-align: $i;
+    }
+}
+@media (max-width: 1399px) {
+	h2 {
+		font-size: 45px;
+		line-height: 55px;
+	}
+}
+@media (max-width: 767px) {
+	h2 {
+		font-size: 38px;
+		line-height: 50px;
+	}
+}
+@media (max-width: 420px) {
+	h2 {
+		font-size: 31px;
+		line-height: 41px;
+	}
+	h3 {
+		font-size: 28px;
+		line-height: 38px;
+	}
+}
+@media (max-width: 359px) {
+	h2 {
+		font-size: 27px;
+		line-height: 37px;
+	}
+	h3 {
+		font-size: 24px;
+		line-height: 34px;
+	}
+	h4 {
+		font-size: 21px;
+		line-height: 31px;
+	}
+	h5 {
+		font-size: 20px;
+		line-height: 30px;
+	}
+	h6 {
+		font-size: 18px;
+		line-height: 28px;
+	}
+}
+/*==========================================================================
+Conbix Button And Title Styles CSS
+==========================================================================*/
+.subtitle-one,
+.subtitle-two,
+.subtitle-three {
+	position: relative;
+	text-transform: uppercase;
+	font-family: var(--heading-font);
+	color: var(--primary-color-1);	
+	font-weight: 700;
+	font-size: 16px;
+	line-height: 26px;	
+	padding-left: 55px;
+	display: inline-block;
+	margin-bottom: 14px;
+	&::before {
+		position: absolute;
+		content: '';
+		top: 6px;
+		left: 0;
+		width: 40px;
+		height: 2px;
+		background: var(--primary-color-1);
+	}
+	&::after {
+		position: absolute;
+		content: '';
+		bottom: 6px;
+		left: 0;
+		width: 40px;
+		height: 2px;
+		background: var(--primary-color-1);
+	}
+}
+.subtitle-two {
+	color: var(--primary-color-2);
+	&::before {
+		background: var(--primary-color-2);
+	}
+	&::after {
+		background: var(--primary-color-2);
+	}
+}
+.subtitle-three {
+	color: var(--primary-color-3);
+	&::before {
+		background: var(--primary-color-3);
+	}
+	&::after {
+		background: var(--primary-color-3);
+	}
+}
+.btn-one,
+.btn-two,
+.btn-three,
+.btn-four,
+.btn-five,
+.btn-six,
+.btn-seven,
+.btn-eight,
+.btn-nine {
+	background: var(--primary-color-1);
+	color: var(--text-white);
+	display: inline-flex;
+	align-items: center;
+	font-size: 16px;
+	line-height: 26px;
+	padding: 17px 43px;
+	text-align: center;
+	font-weight: 700;
+	font-family: var(--heading-font);
+	z-index: 3;
+	position: relative;
+	transition: 0.4s;
+	text-transform: uppercase;
+	overflow: hidden;
+	border-radius: 6px;
+	i {
+		position: relative;
+		top: 0px;
+		margin-left: 15px;
+		font-size: 13px;
+	}
+    &::before {
+		content: '';
+		position: absolute;
+		height: 400px;
+		width: 430px;
+		top: 50%;
+		left: 50%;
+		background: var(--btn-heading-color);
+		border-radius: 50%;
+		transform: translateY(-50%) translateX(-50%) scale(0);
+		transition: all 0.5s ease-out 0s;
+		z-index: -1;
+    }
+    &:hover {
+        color: var(--text-white);
+        &::before {
+			transform: translateY(-50%) translateX(-50%) scale(1);
+        }
+    }
+	&:focus {
+		color: var(--text-white);
+	}
+}
+.btn {
+	&-two {
+		background: var(--btn-white);
+		color: var(--btn-heading-color);
+		border: 1px solid var(--color-4);
+		padding: 16px 42px;
+		&::before {
+			background: var(--primary-color-1);
+		}
+		&:focus {
+			color: var(--primary-color-1);
+		}
+		&:hover {
+			border-color: var(--primary-color-1);
+		}
+	}	
+	&-three {
+		background: transparent;
+		color: var(--text-white);
+		border: 1px solid var(--border-white);
+		padding: 16px 42px;
+		&:hover {
+			color: var(--text-white);
+			border-color: var(--primary-color-1);
+		}
+		&::before {
+			background: var(--primary-color-1);
+		}
+		&:focus {
+			color: var(--text-white);
+		}
+	}
+	&-four {
+		background: var(--btn-heading-color);
+		&::before {
+			background: var(--btn-white);
+		}
+		&:hover {
+			color: var(--btn-heading-color);
+		}
+	}
+	&-five {
+		background: var(--primary-color-2);
+		color: var(--text-white);
+		border-radius: 30px;
+		&::before {
+			background: var(--btn-white);
+		}
+		&:hover {
+			color: var(--btn-heading-color);
+		}
+		&:focus {
+			color: var(--btn-heading-color);
+		}
+	}
+	&-six {
+		background: transparent;
+		border: 1px solid var(--primary-color-2);
+		color: var(--primary-color-2);
+		border-radius: 30px;
+		&:hover {
+			border-color: var(--text-white);
+		}
+		&::before {
+			background: var(--btn-white);
+		}
+		&:focus {
+			color: var(--primary-color-2);
+		}
+	}
+	&-seven {
+		background: var(--primary-color-3);
+		&::before {
+			background: var(--btn-heading-color);
+		}
+	}
+	&-eight {
+		background: transparent;
+		color: var(--primary-color-3);
+		border: 1px solid var(--primary-color-3);
+		padding: 16px 42px;
+		&:hover {
+			border-color: var(--btn-heading-color);
+		}
+		&::before {
+			background: var(--btn-heading-color);
+		}
+		&:focus {
+			color: var(--primary-color-3);
+		}
+	}
+	&-nine {
+		background: var(--btn-white);
+		color: var(--text-white);
+		&:hover {
+			color: var(--text-white);
+		}
+		&::before {
+			background: var(--btn-heading-color);
+		}
+		&:focus {
+			color: var(--primary-color-3);
+		}
+	}
+}
+.simple-btn-1,
+.simple-btn-2,
+.simple-btn-3 {
+	color: var(--primary-color-1);
+	display: inline-block;
+	font-size: 16px;
+	line-height: 26px;
+	font-weight: 700;
+	font-family: var(--heading-font);
+	transition: 0.4s;
+	text-transform: uppercase;
+	i {
+		position: relative;
+		top: 0;
+		margin-left: 15px;
+		font-size: 13px;
+	}
+    &:hover {
+        color: var(--btn-heading-color);
+    }
+	&:focus {
+		color: var(--btn-heading-color);
+	}
+}
+.simple-btn {
+	&-2 {
+		color: var(--text-heading-color);
+		&:hover {
+			color: var(--primary-color-1);
+		}
+	}
+	&-3 {
+		color: var(--text-white);
+		&:hover {
+			color: var(--primary-color-1);
+		}
+	}
+}
+/*==========================================================================
+Conbix Text Style CSS
+==========================================================================*/
+.text {
+	&-one {
+		font-family: var(--heading-font);
+		font-weight: 700;
+		font-size: 18px;
+		line-height: 28px;
+		text-transform: capitalize;
+		color: var(--text-heading-color);
+	}
+	&-two {
+		font-family: var(--heading-font);
+		font-weight: 600;
+		font-size: 16px;
+		line-height: 26px;
+		text-transform: capitalize;
+		color: var(--text-heading-color);
+	}
+	&-three {
+		font-family: var(--heading-font);
+		font-weight: 600;
+		font-size: 14px;
+		line-height: 24px;
+		text-transform: capitalize;
+		color: var(--text-heading-color);
+	}
+	&-four {
+		font-family: var(--heading-font);
+		font-weight: 500;
+		font-size: 16px;
+		line-height: 26px;
+		text-transform: capitalize;
+		color: var(--text-heading-color);
+	}
+	&-five {
+		font-family: var(--heading-font);
+		font-weight: 500;
+		font-size: 14px;
+		line-height: 24px;
+		text-transform: capitalize;
+		color: var(--text-heading-color);
+	}
+	&-six {
+		font-size: 17px;
+		line-height: 30px;
+		text-transform: capitalize;
+		color: var(--text-heading-color);
+	}
+	&-seven {
+		font-size: 15px;
+		line-height: 26px;
+		text-transform: capitalize;
+		color: var(--text-heading-color);
+	}
+	&-eight {
+		font-size: 14px;
+		line-height: 24px;
+		text-transform: capitalize;
+		color: var(--text-heading-color);
+	}
+	&-nine {
+		font-size: 12px;
+		line-height: 22px;
+		text-transform: capitalize;
+		color: var(--text-heading-color);
+	}
+}
+@keyframes rotate {
+	100% {
+		transform: rotate(90deg);
+	}
+}
+/*==========================================================================
+Scroll Top CSS
+==========================================================================*/
+.scroll-up {
+	cursor: pointer;
+	display: block;
+	border-radius: 50px;
+	box-shadow: inset  0 0 0 2px var(--color-8);
+	z-index: 10000;
+	opacity: 0;
+	visibility: hidden;
+	transform: translateY(15px);
+	position: fixed;
+	right: 20px;
+	bottom: 20px;
+	height: 50px;
+	width: 50px;
+    transition: all 200ms linear;
+	&::after {
+		position: absolute;
+		font-family: 'Font Awesome 5 Pro';
+		content: "\f176";
+		text-align: center;
+		line-height: 50px;
+		font-size: 24px;
+		color: var(--primary-color-1);
+		left: 0;
+		top: 0;
+		font-size: 20px;
+		height: 50px;
+		width: 50px;
+		cursor: pointer;
+		display: block;
+		z-index: 1;
+		transition: all 200ms linear;
+	}
+	&.active-scroll {
+		opacity: 1;
+		visibility: visible;
+		transform: translateY(0);
+	}
+	svg path { 
+		fill: none; 
+	}
+	svg.scroll-circle path {
+		stroke: var(--primary-color-1);
+		stroke-width: 4;
+		box-sizing:border-box;
+		transition: all 200ms linear;
+	}
+	&.two {
+		&::after {
+			color: var(--primary-color-2);
+		}
+		svg.scroll-circle path {
+			stroke: var(--primary-color-2);
+		}
+	}
+	&.three {
+		&::after {
+			color: var(--primary-color-3);
+		}
+		svg.scroll-circle path {
+			stroke: var(--primary-color-3);
+		}
+	}
+}
+/*==========================================================================
+Preloader CSS
+==========================================================================*/
+.theme-loader {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	background: var(--bg-heading-color);
+	z-index: 9999999999;
+}
+.spinner {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translateX(-50%) translateY(-50%);
+	display: flex;
+}
+.spinner-bounce {
+	will-change: transform;
+	height: 45px;
+	width: 45px;
+	border-radius: 50%;
+	background: var(--primary-color-1);
+	display: inline-block;
+	animation: bounces 1s ease-in-out infinite alternate;
+	transform-origin: 50% 50%;
+	&.one {
+		margin-right: 15px;
+	}
+	&.two {
+		margin-right: 15px;
+		animation-delay: .4s;
+	}
+	&.three {
+		animation-delay: .8s;
+	}
+}
+@keyframes bounces {
+	0% {
+		transform: scale(1);
+		background: var(--primary-color-1);
+	}
+	50% {
+		background: var(--primary-color-2);
+	}
+	100% {
+		transform: scale(.2);
+		background: var(--primary-color-3);
+	}
+}
+/*==========================================================================
+Animation CSS
+==========================================================================*/
+.video {
+	position: relative;
+	text-align: center;
+	display: inline-block;
+	z-index: 4;
+	span {
+		position: relative;
+		color: var(--primary-color-2);
+		font-size: 20px;
+		z-index: 1;
+		background: var(--bg-white);
+		width: 90px;
+		height: 90px;
+		line-height: 90px;
+		border-radius: 50%;
+		display: block;      
+		cursor: pointer;          
+	}          
+}
+.video-pulse::after, .video-pulse::before {
+	position: absolute;
+	content: "";
+	width: 100%;
+	height: 100%;
+	border: 1px solid var(--border-white);
+	opacity: 0.3;
+	left: 0;
+	top: 0;
+	border-radius: 50%;
+	animation-duration: 2.5s;
+	animation-timing-function: linear;
+	animation-name: video-animation;
+	animation-iteration-count: infinite;
+}
+.video-pulse::before {
+	animation-delay: 1s;
+}
+.modal-video-close-btn {
+    padding: 0
+}
+@keyframes video-animation {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.5);
+    }
+    100% {
+        opacity: 0;
+        transform: scale(2);
+    }
+}
+
+.content__roll {
+	animation: roll 10s infinite linear;
+}
+@keyframes roll {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(-359deg);
+	}
+}
+.roll {
+	animation: rotation 2s infinite linear;
+}
+@keyframes rotation {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(359deg);
+	}
+}
+
+.left-right-animate {
+	animation-name: left-right;
+	animation-duration: 3s;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+}
+@keyframes left-right {
+	0% {
+		transform: translateX(20px);
+	}
+	50% {
+		transform: translateX(5px);
+	}
+	100% {
+		transform: translateX(20px);
+	}
+}
+
+.left-right-animate2 {
+	animation-name: left-right2;
+	animation-duration: 4s;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+}
+@keyframes left-right2 {
+	0% {
+		transform: translateX(10px);
+	}
+	50% {
+		transform: translateX(110px);
+	}
+	100% {
+		transform: translateX(10px);
+	}
+}
+
+.icon-animation {	
+	animation: icon-animation 1.5s ease-in-out infinite;
+}
+
+@keyframes icon-animation {
+
+    from {
+        transform:rotate3d(0, 0, 1, 0deg);
+    }
+    20%, 32%, 44%, 56%, 68% {
+        transform: rotate3d(0, 0, 1, 0deg);
+    }
+    23%, 35%, 47%, 59%, 71% {
+        transform: rotate3d(0,0,1,15deg);
+    }
+    26%, 38%, 50%, 62%, 74% {
+        transform: rotate3d(0,0,1,0deg);
+    }
+    29%, 41%, 53%, 65%, 77% {
+        transform: rotate3d(0,0,1,-15deg);
+    }
+    80% {
+        transform:rotate3d(0, 0, 1, 0deg);
+    }
+
+}
+
+@keyframes animation {
+	100% {
+		left: 125%;
+	}
+}
+
+@keyframes rotateY {
+	100% {
+		transform: rotateY(360deg);
+	}
+}
+
+.swiper-button-prev::after {
+	display: none;
+}
+.swiper-button-next::after {
+	display: none;
+}
--- a/public/assets/sass/default/_dark.scss
+++ b/public/assets/sass/default/_dark.scss
@ -0,0 +1,308 @@
+/*==========================================================================
+Dark CSS
+==========================================================================*/
+.light-n {
+    display: none;
+}
+.light {
+	display: none;
+}
+.dark-mode {
+    color: var(--color-20);
+    background: var(--dark-one);
+    --text-heading-color: #FFFFFF;
+    --color-2: #808287;
+    --color-6: #222429;
+    --color-7: #343434;
+    --color-10: #343434;
+    --color-12: #343434;
+    --color-13: #808287;
+    --color-15: #343434;
+    --color-16: #343434;
+    --border-color-1: #343434;
+    --border-color-2: #343434;
+    --border-color-3: #343434;
+    --border-color-4: #343434;
+    --bg-white: #1C1E22;
+    .dark__image img {
+        filter: grayscale(100%);
+    }
+    .light-n {
+        display: inline-block;
+    }
+    .dark-n {
+        display: none;
+    }
+    .blog__two-item-content .btn-six,
+    .btn-two {
+        border-color: #343434;
+    }
+    //========== Banner ==========\\  
+    .banner__three {
+        background-image: url("../../assets/img/shape/dark-bg.jpg") !important;
+    }
+    //========== Header ==========\\
+    .header__two {
+        &::before {
+            background: url("../../assets/img/shape/before-dark.png");
+            background-position: center;
+            background-repeat: no-repeat;
+
+        }
+        &::after {
+            background: url("../../assets/img/shape/after-dark.png");
+            background-position: center;
+            background-repeat: no-repeat;
+
+        }
+    }
+    .header__area-menubar-right-sidebar-popup-icon::before {
+        opacity: 0.2;
+    }
+    .header__area-menubar-center-menu ul li.menu-item-has-children {
+        > a {
+            &::before {
+                background: var(--text-white);
+            }
+            &::after {
+                background: var(--text-white);
+            }
+        }
+    }
+    .header__area-menubar-center-menu {
+        ul li.menu-item-has-children:hover > a::after {
+            background: var(--primary-color-1);
+        }
+        &.two {
+            ul {
+                li {
+                    &.menu-item-has-children {
+                        &:hover > a {
+                            &::after {
+                                background: var(--primary-color-2);
+                            }
+                        }
+                    }
+                }
+            }                   
+        }
+        &.three {
+            ul {
+                li {
+                    &.menu-item-has-children {
+                        &:hover > a {
+                            &::after {
+                                background: var(--primary-color-3);
+                            }
+                        }
+                    }
+                }
+            }                   
+        }
+    }
+    .header__sticky-sticky-menu {
+        box-shadow: 0 0 50px var(--color-12);
+    }
+    .header__area-menubar.two .header__area-menubar-left-logo .two {
+        display: none;
+    } 
+    //========== Contact ==========\\
+    .contact__four-info {
+        background: var(--dark-two);
+        &::after {
+            opacity: 0;
+        }
+        &:hover {
+            background: var(--bg-heading-color);
+            &::after {
+                opacity: 0.6;
+            }
+        }
+    }
+    .contact__four-form,
+    .contact__page-form {
+        background: var(--dark-two);
+        input,
+        textarea {
+            background: var(--dark-two);            
+        }
+    }
+    .contact__two-box {
+        box-shadow: 0 0 80px var(--color-18);
+    }
+    //========== Features ==========\\
+    .features-area-item.features-area-item-hover {
+        background: var(--primary-color-3);
+    }
+    //========== Services ==========\\
+    .banner__one-image::before,
+    .portfolio__three::before,
+    .page__banner::before,
+    .services__two-item::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        background: var(--text-white);
+        mix-blend-mode: color;
+    }
+    .services__three-item-content::after {
+        background: var(--dark-two);
+    }
+    //========== Pricing ==========\\
+    .pricing__area-item {
+        box-shadow: none;
+        background: var(--dark-two);
+        &::after {
+            content: none;
+        }
+        &-title .text-two {
+            color: var(--color-20);
+        }
+    }
+    //========== Experience ==========\\
+    .copyright__three p,
+    .experience__area-right-skill-item-count.text-two {
+        color: var(--color-20);
+    }
+    //========== Get In Touch ==========\\
+    .getIn__touch-three-right {
+        background: var(--dark-two);
+        input,
+        textarea {
+            border-color: var(--body-color);
+            &:focus {
+                border-color: var(--primary-color-3);                
+            }
+        }
+    }
+    .getIn__touch-left {
+        box-shadow: 0 0 60px var(--color-11);
+    }    
+    //========== Team ==========\\
+    .team__three-item-image-info-icon::after {
+        background-image: url("../../assets/img/icon/union-dark.png");
+    }   
+    .testimonial__area-item-client-image img,
+    .news__standard-left-item-image img,
+    .testimonial__two-item-bottom > img,
+    .all__sidebar-help-image > img,
+    .team__three-item-image > img,
+    .team__two-item-image > img,
+    .faq__two-left-image > img,
+    .blog__two-item-image img,
+    .project__area-item > img,
+    .project__one-item > img,
+    .post__item-image img {
+        filter: grayscale(100%);
+    }
+    .header__area-menubar-center-menu ul li .sub-menu,
+    .testimonial__two-item-bottom::before,
+    .news__standard-left-item-content,
+    .solutions__two-item-icon,
+    .blog__three-item-content,
+    .team__area-item-content,
+    .blog__two-item-content,
+    .features-area-item,
+    .testimonial__two-item {
+        background: var(--dark-two);
+    }    
+    input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
+        color: var(--text-white);
+    }
+    .mode__switch::before {
+        left: calc(100% - 31px); 
+    }
+    .mode__switch span {
+        &::before {
+            background-image: url('../../assets/img/icon/sun-white.png');
+        }
+        &::after {
+            background-image: url("../../assets/img/icon/moon-dark.png");
+        }
+    }
+}
+/*==========================================================================
+Dark Light Switch CSS
+==========================================================================*/
+.switch__tab {
+    position: fixed;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    right: 0;
+    top: 52%;
+    transform: translateY(-50%) translateX(50px) rotate(90deg);
+    z-index: 3; 
+    cursor: pointer;
+}
+.light-mode-title,
+.dark-mode-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-heading-color);
+    display: flex;
+    align-items: center;
+}    
+.mode__switch {
+    height: 34px;
+    width: 80px;
+    display: inline-block;
+    position: relative;
+    margin: 0 10px;
+    background: var(--primary-color-1);
+    transform: translateY(0px);
+    border-radius: 35px;
+    cursor: pointer;
+    transition: all 0.3s ease-out 0s; 
+    &::before {
+        content: "";
+        position: absolute;
+        left: 3px;
+        top: 3px;
+        background: var(--text-white);
+        width: 28px;
+        height: 28px;
+        z-index: -1;
+        border-radius: 50%;
+        transition: all 0.3s ease-out 0s;
+    }
+    &.two {
+        background: var(--primary-color-2);
+    } 
+    &.three {
+        background: var(--primary-color-3);
+    } 
+}    
+.mode__switch span {
+    position: relative;
+    z-index: 1;
+    width: 80px;
+    height: 34px;
+    display: block;
+    &::before {
+        content: "";
+        position: absolute;
+        top: 8px;
+        right: 54px;
+        background-image: url('../../assets/img/icon/sun.png');
+        background-repeat: no-repeat;
+        width: 18px;
+        height: 18px;
+        background-size: cover;            
+    }
+    &::after {
+        content: "";
+        position: absolute;
+        top: 8px;
+        left: 54px;
+        background-image: url("../../assets/img/icon/moon.png");
+        background-repeat: no-repeat;
+        width: 18px;
+        height: 18px;
+        background-size: cover;
+    }
+}       
--- a/public/assets/sass/default/_space.scss
+++ b/public/assets/sass/default/_space.scss
@ -0,0 +1,184 @@
+/*==========================================================================
+Space And Container CSS
+==========================================================================*/
+.custom__container {
+	max-width: 1520px;
+	margin: 0 auto;
+    padding: 0 12px;
+}
+.auto__container {
+	max-width: 1720px;
+	margin: 0 auto;
+    padding: 0 12px;
+}
+@for $i from 0 to 25 {
+    .mt-#{5 * $i}{
+        margin-top: 5px * $i;
+    }
+    .mb-#{5 * $i}{
+        margin-bottom: 5px * $i;
+    }
+    .ml-#{5 * $i}{
+        margin-left: 5px * $i;
+    }
+    .mr-#{5 * $i}{
+        margin-right: 5px * $i;
+    }
+    .pt-#{5 * $i}{
+        padding-top: 5px * $i;
+    }
+    .pb-#{5 * $i}{
+        padding-bottom: 5px * $i;
+    }
+    .pl-#{5 * $i}{
+        padding-left: 5px * $i;
+    }
+    .pr-#{5 * $i}{
+        padding-right: 5px * $i;
+    }
+}
+.display-n {
+    display: none !important;
+}
+@media (max-width: 1199px) {
+    @for $i from 0 to 20 {
+        .xl-pb-#{5 * $i}{
+            padding-bottom: 5px * $i;
+        }
+        .xl-pl-#{5 * $i}{
+            padding-left: 5px * $i;
+        }
+        .xl-pr-#{5 * $i}{
+            padding-right: 5px * $i;
+        }
+        .xl-mb-#{5 * $i}{
+            margin-bottom: 5px * $i;
+        }
+        .xl-ml-#{5 * $i}{
+            margin-left: 5px * $i;
+        }
+        .xl-mr-#{5 * $i}{
+            margin-right: 5px * $i;
+        }
+    }
+    $list: left, center, right;
+    @each $i in $list {
+        .xl-t-#{$i} {
+            text-align: $i;
+        }
+    }
+    .xl-display-n {
+        display: none !important;
+    }
+    .xl-display-b {
+        display: block !important;
+    }
+}
+@media (max-width: 991px) {
+    @for $i from 0 to 15 {
+        .lg-mb-#{5 * $i}{
+            margin-bottom: 5px * $i;
+        }
+        .lg-mt-#{5 * $i}{
+            margin-top: 5px * $i;
+        }
+        .lg-ml-#{5 * $i}{
+            margin-left: 5px * $i;
+        }
+        .lg-pt-#{5 * $i}{
+            padding-top: 5px * $i;
+        }
+        .lg-pb-#{5 * $i}{
+            padding-bottom: 5px * $i;
+        }
+        .lg-pl-#{5 * $i}{
+            padding-left: 5px * $i;
+        }
+        .lg-pr-#{5 * $i}{
+            padding-right: 5px * $i;
+        }
+    }
+    $list: left, center, right;
+    @each $i in $list {
+        .lg-t-#{$i} {
+            text-align: $i;
+        }
+    }
+    .lg-display-n {
+        display: none !important;
+    }
+    .lg-display-b {
+        display: block !important;
+    }
+}
+@media (max-width: 767px) {
+    @for $i from 0 to 10 {
+        .md-mb-#{5 * $i}{
+            margin-bottom: 5px * $i;
+        }
+        .md-mt-#{5 * $i}{
+            margin-top: 5px * $i;
+        }
+        .md-pt-#{5 * $i}{
+            padding-top: 5px * $i;
+        }
+        .md-pb-#{5 * $i}{
+            padding-bottom: 5px * $i;
+        }
+        .md-pl-#{5 * $i}{
+            padding-left: 5px * $i;
+        }
+        .md-pr-#{5 * $i}{
+            padding-right: 5px * $i;
+        }
+    }
+    $list: left, center, right;
+    @each $i in $list {
+        .md-t-#{$i} {
+            text-align: $i;
+        }
+    }
+    .md-display-n {
+        display: none !important;
+    }
+    .md-display-b {
+        display: block !important;
+    }
+}
+@media (max-width: 575px) {
+    @for $i from 0 to 12 {
+        .sm-mb-#{5 * $i}{
+            margin-bottom: 5px * $i;
+        }
+        .sm-mt-#{5 * $i}{
+            margin-top: 5px * $i;
+        }
+        .sm-ml-#{5 * $i}{
+            margin-left: 5px * $i;
+        }
+        .sm-pt-#{5 * $i}{
+            padding-top: 5px * $i;
+        }
+        .sm-pb-#{5 * $i}{
+            padding-bottom: 5px * $i;
+        }
+        .sm-pl-#{5 * $i}{
+            padding-left: 5px * $i;
+        }
+        .sm-pr-#{5 * $i}{
+            padding-right: 5px * $i;
+        }
+    }
+    $list: left, center, right;
+    @each $i in $list {
+        .sm-t-#{$i} {
+            text-align: $i;
+        }
+    }
+    .sm-display-n {
+        display: none !important;
+    }
+    .sm-display-b {
+        display: block !important;
+    }
+}